d3中的圆环图

Question

我有带图例规格的圆环图。我在数据集中有2个值。但是这里有这个代码，我只得到第一个值，“未解决”。

   var dataset = {
 Unresolved: [3],
Resolved:[7] 
};

   var keyValue=[];
   for(key in dataset){
   keyValue.push(key); 
    }

  var width = 260,
height = 300,
radius = Math.min(width, height) / 2;

    var color = ["#9F134C", "#ccc"];

    var pie = d3.layout.pie()
.sort(null);

    var arc = d3.svg.arc()
    .innerRadius(radius - 90)
    .outerRadius(radius - 80);

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

 var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");

   var path = gs.selectAll("path")
.data(function(d,i) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { console.log("log", keyValue[i]);return color[i]; }) //Here i'm getting only the 1st value "unresolved".
.attr("d", arc);

   var legendCircle =      d3.select("body").append("svg").selectAll("g").data(keyValue).enter().append("g")
                       .attr("class","legend")
                       .attr("width", radius)
                       .attr("height", radius * 2)
                       .attr("transform", function(d, i) {     return "translate(0," + i * 20 + ")"; });


         legendCircle.append("rect")
                .attr("width", 18)
               .attr("height", 10)
                .style("fill", function(d, i) { return color[i];});

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

我得到的输出是，

有人可以帮忙吗？感谢。

Answer 1

看起来你正在代码中进行嵌套选择，通常只需要嵌套数据。但是，您的数据不是嵌套的 - 只有一个级别有2个值。发生的事情是，通过使用嵌套选择，您将下降到值数组中，每个数组都只包含一个值。

如果您取消嵌套选择并将原始数据传递给饼图布局，它可以正常工作。

var gs = svg.selectAll("g").data(pie(d3.values(dataset))).enter().append("g");
var path = gs.append("path")
             .attr("fill", function(d, i) { return color[i]; })
             .attr("d", arc);

完整示例here。