javascript - 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 循环来避免重复。我试图通过对代码进行多种修改来修复它，但都没有奏效。这是一个Pen这个的。现在，我有两个问题:

1. 如何解决这个问题？
2. (可选)我在学习阶段，如何让这段代码更高效？

大部分代码取自这个 tutorial .

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

Answer 1

您的问题是 color.domain() 上的数据绑定(bind)。当您在每次迭代中执行 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)"]

一个简单的解决方法是将数据绑定(bind)到:

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

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