CODEWITHSUNDEEP
javascriptangularjsd3.js
Lauren F
Lauren F

Reputation: 1322

Setting up d3-tip for Angular

I'm having trouble right off the back instantiating d3-tip for my angular project.

I've run bower install d3-tip which installed d3-tip with the following bower.json file:

{
  "name": "d3-tip",
  "version": "0.6.7",
  "main": "index.js",
  "ignore": [
    "**/.*",
    "node_modules",
    "components",
    "bower_components",
    "examples",
    "Makefile",
    "docs"
  ],
  "dependencies": {
    "d3": "3.5.5"
  },
  "homepage": "https://github.com/Caged/d3-tip",
  "_release": "0.6.7",
  "_resolution": {
    "type": "version",
    "tag": "v0.6.7",
    "commit": "07cf158c54cf1686b3000d784ef55d27b095cc0e"
  },
  "_source": "git://github.com/Caged/d3-tip.git",
  "_target": "~0.6.6",
  "_originalSource": "d3-tip"
}

I next attempted to drop in the example provided in d3-tip's documentation, and received the following error:

TypeError: d3.tip is not a function

code:

/* Initialize tooltip */
tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

/* Invoke the tip in the context of your visualization */
vis.call(tip)

vis.selectAll('rect')
    .data(data)
.enter().append('rect')
    .attr('width', function() { return x.rangeBand() })
    .attr('height', function(d) { return h - y(d) })
    .attr('y', function(d) { return y(d) })
    .attr('x', function(d, i) { return x(i) })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)

Then, thinking I'd need to instantiate d3-tip in my angular.module, like this:

angular.module('d3', []);
angular
    .module('bApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'ui.router',
        'ct.ui.router.extras',
        'angularMoment',
        'd3',
        'd3-tip',
        'smart-table',
        'oitozero.ngSweetAlert',
        'ui.select',
        'daterangepicker'
    ])

Which threw:

Error: [$injector:modulerr] Failed to instantiate module d3-tip due to:

Error: [$injector:nomod] Module 'd3-tip' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

I'd also tried injecting d3-tip directly into the directive I'm using it for as such (it is added as d3Tip rather than d3-tip because the hyphen was throwing an error):

angular.module('bApp')
  .directive('reportChart', ['d3','$parse', '$state', 'd3Tip', function(d3,$parse,$state,d3Tip) {

And got:

Error: [$injector:unpr] Unknown provider: d3TipProvider <- d3Tip <- reportChartDirective

So, what here is wrong? Thank you!

Upvotes: 3

Views: 2895

Answers (2)

saintlyzero
saintlyzero

Reputation: 1852

I had the same issue with Angular8 and D3v5

Steps I followed:

  1. Install d3-tip : npm i d3-tip

  2. Import import d3Tip from "d3-tip" in the component where you want to use the tool-tip

  3. Create instance of d3Tip() 

let tip = d3Tip()
      tip
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        const tooltip = 
        `<strong style='color:white'>Freq:</strong> <span style='color:cyan'>${d.frequency} </span>`
        return tooltip
      })

  1. Call the method: svg.call(tip)

  2. Trigger on events

.on("mouseover",function(d) { tip.show(d, this)})
.on("mouseout",function(d) { tip.hide(d,this )})

Upvotes: 2

Umair Ahmed
Umair Ahmed

Reputation: 8787

You do not need to inject it any where. it's working without injection on my site.

in your case remove d3-tip in app.js

just run

bower install d3-tip --save

thanks

Upvotes: 0

Related Questions