d3v4-具有图例切换和动画重构的多折线图

Question

我创建了一个带有折线图例切换的多折线图-但我热衷于重构代码库并清理某些部分-特别是数据结构，请使用color（）而不是z scaleOrdinal并使用/以另一个图例代码片段为基础。

//旧版本 https://jsfiddle.net/j9uwbf3t/

//最新版本-但路径有问题吗？ NAN来了 https://jsfiddle.net/xpfrvydg/

这是我想放的新传说

        //legend
        var legendsvgw = 150;
        var legendsvgh = 100;

        var ringRadius = 5;
        var vertical = 20;

        var legendsvg = d3.select($this[0])
            .append("svg")
            .attr("width", legendsvgw)
            .attr("height", legendsvgh)
            .append("g")
            .attr('class', 'legendsvg')
            .attr("transform", "translate(" + 10 + "," + 10 + ")");

        var legend = legendsvg.append("g")
            .attr("class", "legend");


        var labels = legend.selectAll("text.labels")
                .data(data);

        labels.enter().append("text")
          .attr("class", "labels")
          .attr("dx", 15)
          .attr("dy", function(d, i) {
            return (vertical * i) + ringRadius*2;
          })
          .attr("text-anchor", function(d) {
            return "start";
          })
          .text(function(d) {
            return d.label;
          });

        labels.exit().remove();


        var ring = legend.selectAll("circle")
                .data(data);

        ring.enter().append("circle")
          .attr("cy", function(d, i) {
            return (vertical * i) + ringRadius;
          })
          .attr("r", ringRadius)
          .attr("width", ringRadius*2)
          .attr("height", ringRadius*2)
          .style("fill", function(d, i) {
            return color(i);
          });

        ring.exit().remove();