在d3餅圖的不同圓弧中顯示的顏色相同

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);}); 

這將給你一個與多種顏色的餅圖，即使切片具有相同的價值：