D3JS包括图例的先前元素

我有四个饼图，它们代表使用d3JS库制作的不同数据。它们的制作正确，但是当我包含其图例时，上一个图表的图例中的元素也将包含在下一个图表中。因此，在最后一个图表的图例中，所有先前图表的图例的元素都存在。

代码是这样的：

/*var divSkills, divKnows, divEnvs, divTools;

var dataSkills = [
  { label: 'Web Designing', count: 86 }, 
  { label: 'Web Development / Web Programming', count: 90 },
  { label: 'Graphic Designing / Logo Designing', count: 65 },
  { label: 'Programming', count: 73 },
  { label: 'Networking', count: 63 },
  { label: 'Content Writing', count: 56 }
];
var dataKnows = [
  { label: 'PHP', count: 75 }, 
  { label: 'SQL', count: 59 },
  { label: 'HTML 5', count: 90 },
  { label: 'CSS 3', count: 93 },
  { label: 'JavaScript', count: 80 },
  { label: 'C', count: 75 }
];
var dataEnvs = [
  { label: 'Adobe Dreamweaver', count: 75 }, 
  { label: 'SublimeText', count: 80 },
  { label: 'Notepad++', count: 80 },
  { label: 'Cloud9 (Online IDE)', count: 80 }
];
var dataTools = [
  { label: 'Adobe Photoshop', count: 65 }, 
  { label: 'Adobe Illustrator', count: 30 },
  { label: 'Adobe Fireworks', count: 50 },
  { label: 'AutoDesk Maya', count: 40 },
  { label: 'Git / GitHub / GitLab (Control Version System)', count: 70 }
];

var dataset = [dataSkills, dataKnows, dataEnvs, dataTools];

var width = 360;
var height = 360;
var radius = Math.min(width, height) / 2;
var color = d3.scale.category20b();

var legendRectSize = 18;
var legendSpacing = 4;

$(document).ready(function () {

    divSkills = d3.select(".view-graph section:first-child .graph"),
    divKnows = d3.select(".view-graph section:nth-child(2) .graph"),
    divEnvs = d3.select(".view-graph section:nth-child(3) .graph"),
    divTools = d3.select(".view-graph section:last-child .graph");
    var divs = [divSkills, divKnows, divEnvs, divTools];

    var arc = d3.svg.arc()
          .outerRadius(radius);
    var pie = d3.layout.pie()
          .value(function(d) { return d.count; })
          .sort(null);*/

    for (var i = 0; i < divs.length; i++) {
        var svg = divs[i]
              .append('svg')
              .attr('width', width)
              .attr('height', height)
              .append('g')
              .attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');
        var path = svg.selectAll('path')
              .data(pie( dataset[i]) )
              .enter()
              .append('path')
              .attr('d', arc)
              .attr('fill', function(d, i) { 
                return color(d.data.label);
        });

        var legend = svg.selectAll('.legend')
              .data(color.domain())
              .enter()
              .append('g')
              .attr('class', 'legend')
              .attr('transform', function(d, j) {
                var height = legendRectSize + legendSpacing;
                var offset =  height * color.domain().length / 2;
                var horz = 15 * legendRectSize;
                var vert = j * height - offset;
                return 'translate(' + horz + ',' + vert + ')';
              });
        legend.append('rect')
              .attr('width', legendRectSize)
              .attr('height', legendRectSize)
              .style('fill', color)
              .style('stroke', color);
        legend.append('text')
              .attr('x', legendRectSize + legendSpacing)
              .attr('y', legendRectSize - legendSpacing)
              .text(function(d) { return d; });
    }

});

如您所见，我正在使用for循环来避免重复。我试图通过在代码中进行几个变体来修复它，但是没有一个起作用。这是笔。现在，我有两个问题：

1. 如何解决这个问题？
2. （可选）在我处于学习阶段时，如何使此代码更高效？

大多数代码都来自本教程。

编辑：注释掉不相关的代码。