d3-tip不适用于折线图 [英] d3-tip not working for a line chart

问题描述

我试图添加工具提示到在dc制作的折线图，但我得到一个错误：

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

错误是：

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

注意 index.js是我使用此代码的地方 http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0 .6.3.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

推荐答案

我有同样的问题，希望这将帮助某人在那里。我使用直流系列图和d3提示。为了使用d3tips，首先我们要创建一个d3tip：

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

确保您在图形已经呈现之后执行此操作。接下来，您必须使用d3来选择要绑定d3tip的元素。由于您使用dc创建图形，您选择什么？如果您选择错误的元素， .html 方法中的回调将获得未定义的值。

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.

错误，我发现你必须选择作为数据父项的 g 元素。数据应该有一个 d 属性。您可以通过右键单击图表（条形图或系列或时间轴）并检查该元素来找到元素。您可以深入了解以下内容：

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:

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

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

祝你好运！

这篇关于d3-tip不适用于折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！