D3JS 包括之前的圖例元素

Question

我有四個餅圖代表不同的數據，使用 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. （可選）如何使此代碼更高效，因為我處於學習階段？

大部分代碼取自本教程。

編輯：注釋掉不相關的代碼。

Answer 1

您的問題是color.domain()上的數據綁定。 當您在每次迭代中執行color(d.data.label)時，域會增長。 扔一個

console.log(color.domain());

在您建立每個傳奇之前。 你會看到的：

["Web Designing", "Web Development / Web Programming", "Graphic Designing / Logo Designing", "Programming", "Networking", "Content Writing"]
["Web Designing", "Web Development / Web Programming", "Graphic Designing / Logo Designing", "Programming", "Networking", "Content Writing", "PHP", "SQL", "HTML 5", "CSS 3", "JavaScript", "C"]
["Web Designing", "Web Development / Web Programming", "Graphic Designing / Logo Designing", "Programming", "Networking", "Content Writing", "PHP", "SQL", "HTML 5", "CSS 3", "JavaScript", "C", "Adobe Dreamweaver", "SublimeText", "Notepad++", "Cloud9 (Online IDE)"]
["Web Designing", "Web Development / Web Programming", "Graphic Designing / Logo Designing", "Programming", "Networking", "Content Writing", "PHP", "SQL", "HTML 5", "CSS 3", "JavaScript", "C", "Adobe Dreamweaver", "SublimeText", "Notepad++", "Cloud9 (Online IDE)", "Adobe Photoshop", "Adobe Illustrator", "Adobe Fireworks", "AutoDesk Maya", "Git / GitHub / GitLab (Control Version System)"]

一個簡單的解決方法是將數據綁定到：

 var pieLabels = dataset[i].map(function(d){
     return d.label;
 });

 var legend = svg.selectAll('.legend')
     .data(pieLabels);