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

Question

请检查以下 URL 以获取代码示例。这适用于 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)
 // });