Question

我用d3创建了一个饼图。它工作得很好，但是，当两个元素的数据值相等时，它显示相同的颜色。我该如何解决这个问题？

function graph_pie_value(data, id, height, width){

d3.select(id).selectAll("svg").remove();
var radius = Math.min(width, height)/2;
var color = d3.scale.category20c();



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

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

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

svg.append("text").attr("class", "title_text").attr("x", 0)
       .attr("y", -height/6*2).style("font-size", "14px").style("font-weight", 600)
       .style("z-index", "19")
       .style("text-anchor", "middle")
       .text("Market Participation Value");


var totalValue=d3.nest()
        .rollup(function(d){
              return d3.sum(d,function(d){return +d.value;});
                    })
                    .entries(data);

data.forEach(function(d){
        d.value = +d.value;
            d.percent = +(d.value/totalValue*100);
            });


        var g = svg.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append("g")
                    .attr("class", "arc");



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

        console.log(pie);

        g.append("text")
            .attr("transform", function(d){
                var c = arc.centroid(d);
                var x = c[0];
                var y = c[1];

                var h = Math.sqrt(x*x+y*y);

                return "translate("+(x/h*(radius-30))+","+(y/h*(radius-30))+")";
            })
            .attr("dy", "0.35em")
            .attr("class", "percent")
            .style("text-anchor", "middle")
            .text(function(d){return d.data.percent.toFixed(2)+"%";});  

        g.append("path")
            .style("fill", "none")
            .style("stroke", "black")
            .attr("d", function(d)
            {
                var c = arc.centroid(d);
                var x = c[0];
                var y = c[1];

                var h = Math.sqrt(x*x+y*y);
                return "M"+(x/h*(radius-73))+","+(y/h*(radius-73))+"L"+(x/h*(radius-50))+","+(y/h*(radius-50));

                });

        var legend = svg.selectAll(".legend")
          .data(data)
          .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate("+(150-width+i*60)+"," + (height-70) + ")"; });

      legend.append("rect")
          .attr("x", width/2-150)
          .attr("y", 50-height/2)
          .attr("width", 12)
          .attr("height", 12)
          .style("fill", function(d){return color(d.value)});

      legend
          .append("text")
          .attr("class", "legend")
          .attr("x", width/2-130)
          .attr("y", 60-height/2)
          .attr("dy", ".10em")
          .style("text-anchor", "start")
          .text(function(d) { return d.symbol; });

      return;           
}

以下是数据格式：

var data = [
    {"symbol":"MSFT","value":14262751},
    {"symbol":"CSCO","value":12004177}
]

它在圆弧颜色中没有问题，但是当这两个值相等时......

var data = [
    {"symbol":"MSFT","value":14262751},
    {"symbol":"CSCO","value":14262751}
]

...然后饼图显示相同的弧色。

Answer 1

当两个值相等时，它们对应的切片具有相同颜色的原因是因为您要根据值设置颜色：

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

相反，根据数据的索引i设置颜色（在这种情况下D3也会通过回调函数），如下所示：

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

这将为您提供具有多种颜色的饼图，即使切片具有相同的值： example-pie-chart

相同的颜色显示在d3饼图的不同弧度中

1 个答案: