Javascript 如何将图例添加到饼图D3.js？

我已经研究过类似的问题，但仍然不能正确地实现代码

var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var percentageFormat = d3.format("%");

var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);

var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
    return d.values;
});

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.json("staff.json", function(error, json_data) {

var data = d3.nest()
.key(function(d) {
  return d.Position;
})
.rollup(function(d) {
  return d.length;
}).entries(json_data);

data.forEach(function(d) {
d.percentage = d.values / json_data.length;
});

console.log("data variable", data);
console.log("pie(data)", pie(data));

var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc")
.on('mouseover', function() {
  var current = this;  
  var others = svg.selectAll(".arc").filter(function(el) {
    return this != current
  });
  others.selectAll("path").style('opacity', 0.8);
})
.on('mouseout', function() {
  var current = this;
  d3.select(this)
    .style('opacity', 1);
  var others = svg.selectAll(".arc").filter(function(el) {
    return this != current
  });
  others.selectAll("path").style('opacity', 1);
});


g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
  return color(i);
});

g.append("text")
.attr("transform", function(d) {
  return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) {
  console.log("d is", d);
  return percentageFormat(d.data.percentage);
});

下面是一个JSON文件：

[{
"Position" : "Programmer",
    "Name" : "Giacomo Gulizzoni",
     "Age" : 37,
     "Sex" : "Male",
 "Project" : "SmartFactory"
}, {
"Position" : "Tester",
    "Name" : "Marko Botton",
     "Age" : 34,
     "Sex" : "Male",
 "Project" : "SmartFactory"
}, {
"Position" : "Tester",
    "Name" : "Mariah Maclachian",
     "Age" : 37,
     "Sex" : "Female",
 "Project" : "SmartFactory"
}, {
"Position" : "Tester",
    "Name" : "Valerie Liberty",
     "Age" : 25,
     "Sex" : "Female",
 "Project" : "SmartProject"
}, {
"Position" : "Programmer",
   "Name " : "Guido Jack Gulizzoni",
     "Age" : 22,
     "Sex" : "Male",
 "Project" : "SmartProject"
}]

事实上，如果我没弄错的话，图例只是绑定到数据的矩形。但在我的例子中，JSON文件中的项不是数值。请查看我的实验结果。

在您的代码中：

图例选择中的数据设置错误

  var legend = ...
  .data(pie(data))//this is wrong
  .enter().append("g")

你需要这样做

      var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .selectAll("g")
      .data(data)//setting the data as we know there are only two set of data[programmar/tester] as per the nest function you have written
      .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d, i) {
  return color(d.key);
});

  legend.append("text")
      .attr("x", 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .text(function(d) { return d.key; });

工作代码

---

希望这有帮助

实际上，它在你的代码中

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

        legend.append('text')                                     // NEW
          .attr('x', legendRectSize + legendSpacing)              // NEW
          .attr('y', legendRectSize - legendSpacing)              // NEW
          .text(function(d) { console.log("text: ");console.log(d);return d.data.key; }); 

我没有发表评论，也没有做什么改变。

---

你可以观察代码。

我的建议是：你是在寻找工具提示还是图例，如果你是在寻找图例，你想展示什么，或者如果你是在寻找工具提示，你想展示什么。Saikiran，我想要这样的东西：一个图例是给程序员的，另一个是给测试人员的。换句话说，用户应该看到60%和40%的含义。您可以修改

文本（函数（d）{console.log（“d is”，d）；返回percentageFormat（d.data.percentage）；}）

转换为

.text（函数（d）{console.log（“d是”，d）；返回d.data.key+“-”+percentageFormat（d.data.percentage）；}）试试。这不是我想要的）。我需要这个：但现在我有了这个：西里尔，太棒了，谢谢！我对这个d3有点困惑）要研究你的决定！非常感谢你！