javascript - 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 .