d3v4混合组和带有图例的行切换图清理

Question

我建立了一个带有重叠线的分组图表-我热衷于清理代码库并重构结构，使其更整洁。 -目前，分组图表和折线由两个不同的json提供支持-因此理想情况下需要将其合并。

//旧版本 https://jsfiddle.net/7vc9a2hg/

//当前版本 https://jsfiddle.net/rLfmkq8j/1/

还使用此清理后的变体替换了图例代码-因此，图例是一个单独的svg，因此可以与核心图表断开连接

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