Question

请查看以下网址以获取代码示例。这适用于d3 2.x但不适用于d3 3.2.2：点击图例时我在控制台中遇到了一些错误。

使用v2的工作副本：http://bl.ocks.org/bobmonteverde/2070123

不使用v3.x：http://jsfiddle.net/lalits2002/Q5Jag/3328/

这些是v2版本中的脚本：

<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="nvtooltip.js"></script>
<script src="d3legend.js"></script> 
<script src="d3line.js"></script> 
<script src="d3linewithlegend.js"></script>

Answer 1

我不知道确切的原因，但似乎与过渡相关的事情已经改变了。我做了以下更改，它正在工作。查看JSFiddle

的更新版本

 legend.dispatch.on('legendClick', function(d, i) { 
     // existing code

     // Added this to render chart again.
     d3.select('#test1 svg').transition(selection).call(chart);
     // Removed following code 
     // selection.transition().call(chart)
 });

 // similar error in legendMouseout and legendMouseover so removed both currently.

 // legend.dispatch.on('legendMouseover', function(d, i) {
 //   d.hover = true;
 //   selection.transition().call(chart)
 // });

 // legend.dispatch.on('legendMouseout', function(d, i) {
 //  d.hover = false;
 //   selection.transition().call(chart)
 // });

D3折线图图例不适用于v3但使用v2

1 个答案: