d3-tip不适用于折线图

Question

我正在尝试将工具提示添加到以直流制作的折线图中，但我收到错误：

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); });

错误是：

Undefined is not a function

我使用了以下库。我究竟做错了什么？为什么函数未定义？

<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"/>

注意 index.js是我拥有此代码的地方http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js 任何帮助将不胜感激

Answer 1

我遇到同样的问题，希望这会帮助那里的人。我正在使用dc系列图和d3提示。为了使用d3tips，首先我们必须创建一个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"; });

确保在图形渲染完成后执行此操作。接下来，您必须使用d3选择要将d3tip绑定到的元素。由于您使用直流创建图表，您选择了什么？如果选择了错误的元素，.html方法中的回调将获得未定义的值。

经过反复试验，我发现你必须选择作为数据父级的g元素。数据应具有d属性和数据。您可以通过右键单击图表（条形图或系列或时间轴）并检查该元素来找到该元素。你可以深入研究这样的事情：

正如您所看到的，具有d属性的元素的父元素是我们需要的。现在我们知道这是我们想要的元素，我们可以通过将d3tip绑定到正确的元素来完成它：

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

祝你好运！

Answer 2

就像戈登所说，这可能是一个调试问题。通过查看调试器中的控制台找到未定义的函数，然后找到该函数应该定义的位置并从那里开始工作，我将引入一些console.log（）函数来检查您的数据。

但是在D3工具提示问题上，这里有一个关于向d3可视化添加工具提示的演练的链接。它是一组更大的演练和示例，全部免费或通过捐赠。

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

祝你好运！

以下是使用控制台的一些帮助：https://developer.chrome.com/devtools/docs/console