D3尖不工作的折线图

我试图工具提示添加到直流做出了路线图，但我在得到一个错误：D3尖不工作的折线图

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 任何帮助，将不胜感激

来源

2014-08-28 Nisha

Hi Nisha，现在是时候学习如何在浏览器中使用调试器了。您可以将其设置为在异常时停止，并且会指出发生错误的确切位置，您将看到哪些函数未定义。 – Gordon 2014-08-28 12:39:58

我有同样的问题，希望这会帮助别人那里。我正在使用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的元素。由于您使用dc创建图形，因此您选择了什么？如果您选择错误的元素，则.html方法中的回调将获得未定义的值。

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

enter image description here

正如你所看到的，是与d属性的元素的父元素是我们需要的。现在，我们知道这是我们想要的元素，我们可以用我们的d3tip结合正确的元素完成这件事：

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

祝你好运！

来源

2014-11-21 11:30:09 songz

非常有帮助，谢谢！我不得不按照这里的详细说明进行修改，以使鼠标悬停正常工作（'selectAll（'。dot'）'和命名空间的鼠标悬停绑定）https://github.com/dc-js/dc.js/issues/780 – andorov 2015-03-12 23:23:35

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

但是在D3工具提示问题上，这里是一个链接，指向将工具提示添加到d3可视化的演练。这是一整套免费或捐赠的演练和示例的一部分。

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

祝你好运！

而这里的一些帮助，使用控制台：https://developer.chrome.com/devtools/docs/console

来源

2014-08-28 16:43:10

D3尖不工作的折线图

回答

相关问题