d3-tip not working for a line chart

问题

I am trying to add tool-tip to a line chart made in dc but I am getting an error at :

var lineTip = d3.tip()
                  .attr('class', 'd3-tip')
                  .offset([-10, 0])
                  .html(function (d) { return "<span style='color: #f0027f'>" +  d.data.key + "</span> : "  + numberFormat(d.value); });

The error is :

Undefined is not a function

I have used the following libraries. What am I doing wrong? Why is the function undefined?

<g:javascript src="d3.js"/>
<g:javascript src="dc.js"/>
<g:javascript src="index.js"/>
<g:javascript src="jquery-ui-1.10.4.custom.js"/>
<g:javascript src="jQDateRangeSlider-min.js"/>
<g:javascript src="jQDateRangeSlider-withRuler-min.js"/>
<g:javascript src="jQRangeSliderLabel.js"/>

Note index.js is where I have this code http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js Any help would be much appreciated

回答1:

I am having the same problem, hopefully this will help somebody out there. I'm using dc series graph and d3 tips. In order to use d3tips, first we have to create a d3tip:

var pieTip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function (d) { console.log(d); return "<span style='color: #f0027f'>" + "testkey" + "</span> : "  + "value"; });

Make sure you are doing this after the graph has already rendered. Next, you have to use d3 to select elements to bind the d3tip to. Since you create the graph with dc, what do you select? If you select the wrong elements, the callback in your .html method will get undefined value.

After trial and error, I found out that you have to select the g element that is the parent of the data. The data should have a d attribute with the data. You can find the element by right clicking the chart (bar or series or timeline) and inspecting that element. You can drill down to something like this:

As you can see, the element that is the parent of the element with the d attribute is what we need. Now that we know this is the element we want, we can finish this up by binding our d3tip to the correct element:

d3.selectAll("g.stack").call(pieTip);
d3.selectAll("g.stack").on('mouseover', pieTip.show)
  .on('mouseout', pieTip.hide);

Good luck!

回答2:

Like Gordon says, this is probably a debugging issue. Find the function that's undefined by looking at the console in your debugger then find where that function is supposed to be defined and work from there, I'd throw in a some console.log() functions to check on your data.

But on the D3 tooltip issue, here is a link to a walkthrough on adding tooltips to d3 visualizations. It's part a larger set of walkthroughs and examples that are all free or by donation.

http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

Good Luck!

And here's some help with using the console: https://developer.chrome.com/devtools/docs/console

来源：https://stackoverflow.com/questions/25543756/d3-tip-not-working-for-a-line-chart

标签

d3.js

tooltip

dc.js