d3-tip not working for a line chart

Question

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

Answer 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!