爲什麼派的顏色不變？

我是d3.js的初學者。今天，當我學習如何繪製餅圖時，餅的顏色不會改變。但我根據d3 v4的介紹填寫它。這裏是我的代碼：爲什麼派的顏色不變？

<html> 
<head> 
<meta charset="UTF-8"> 
<title>pie map</title> 
</head> 
  
<body> 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
    <script> 
     var width = 400;   
     var height = 400;  
     var dataset = [30,10,43,55,13]; 
     var svg = d3.select("body")  
        .append("svg")  
        .attr("width",width)  
        .attr("height",height);  

     var pie=d3.pie(); 
     var piedata=pie(dataset); 
     var outerRadius=150; 
     var innerRadius=0; 

     var arc=d3.arc() 
       .innerRadius(innerRadius) 
       .outerRadius(outerRadius); 

     var color = d3.scaleOrdinal(d3.schemeCategoty10); 

     var arcs=svg.selectAll("g") 
       .data(piedata) 
       .enter() 
       .append("g") 
       .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); 


      arcs.append("path") 
       .attr("fill",function(d,i){ 
        return color[i]; //to fill color 
       }) 
       .attr("d",function(d){ 
        return arc(d); 
       }); 


      arcs.append("text") 
       .attr("transform",function(d){ 
        return "translate("+arc.centroid(d)+")"; 
       }) 
       .attr("text-anchor","middle") 
       .text(function(d){ 
        return d.data; 
       }); 
     console.log(dataset); 
     console.log(piedata); 
    </script>     
</body> 
</html>

我要圖片的餡餅圖是這樣的：

，但我的是這樣的：

所以我很困惑，因爲沒有錯誤在控制檯中。你知道爲什麼這個顏色不會出現在我的餅圖中嗎？如果你能幫我解決這個問題，我很感激。謝謝！

來源

2016-12-05 Charlie

有您的代碼2級的錯誤

與var color = d3.scaleOrdinal(d3.schemeCategoty10);代替var color = d3.scaleOrdinal(d3.schemeCategory10);一個錯字 -的類
的R您使用

return color[i]; //to fill color 代替 return color(i); //to fill color

<html> <head> <meta charset="UTF-8"> <title>pie map</title> </head> <body> <script src="http://d3js.org/d3.v4.min.js"></script> <script> var width = 400; var height = 400; var dataset = [30,10,43,55,13]; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); var pie=d3.pie(); var piedata=pie(dataset); var outerRadius=150; var innerRadius=0; var arc=d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); var color = d3.scaleOrdinal(d3.schemeCategory10); var arcs=svg.selectAll("g") .data(piedata) .enter() .append("g") .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); arcs.append("path") .attr("fill",function(d,i){ return color(i); //to fill color }) .attr("d",function(d){ return arc(d); }); arcs.append("text") .attr("transform",function(d){ return "translate("+arc.centroid(d)+")"; }) .attr("text-anchor","middle") .text(function(d){ return d.data; }); </script> </body> </html>

來源

2016-12-05 07:24:33 Weedoze

哦，謝謝~~它可以工作！這對我來說太粗心了！謝謝~~ – Charlie

儘管我對D3並不熟悉，但可能是您的問題是簡單的錯字。嘗試改變

var color = d3.scaleOrdinal(d3.schemeCategoty10);

到：

var color = d3.scaleOrdinal(d3.schemeCategory10);

希望幫助！

來源

2016-12-05 07:16:51

這並不解決錯誤 – Weedoze

感謝您的幫助！但是你的代碼無法解決我的問題，並且在提出這個問題之前我使用了你的代碼。 – Charlie

有2個可能的解決方案解決了錯字錯在d3.schemeCategoty10到d3.schemeCategory10後：

你可以嘗試刪除規模從var color = d3.scaleOrdinal(d3.schemeCategoty10);到var color = d3.schemeCategory10;
如果你想把它當作一個有序的規模，你應該改變return color[i];到return color(i);

這將是第一個解決方案結果：

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>pie map</title> 
 
</head> 
 
    
 
<body> 
 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
 
    <script> 
 
     var width = 400;   
 
     var height = 400;  
 
     var dataset = [30,10,43,55,13]; 
 
     var svg = d3.select("body")  
 
        .append("svg")  
 
        .attr("width",width)  
 
        .attr("height",height);  
 

 
     var pie=d3.pie(); 
 
     var piedata=pie(dataset); 
 
     var outerRadius=150; 
 
     var innerRadius=0; 
 

 
     var arc=d3.arc() 
 
       .innerRadius(innerRadius) 
 
       .outerRadius(outerRadius); 
 

 
     var color = d3.schemeCategory10; 
 

 
     var arcs=svg.selectAll("g") 
 
       .data(piedata) 
 
       .enter() 
 
       .append("g") 
 
       .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); 
 

 

 
      arcs.append("path") 
 
       .attr("fill",function(d,i){ 
 
        return color[i]; //to fill color 
 
       }) 
 
       .attr("d",function(d){ 
 
        return arc(d); 
 
       }); 
 

 

 
      arcs.append("text") 
 
       .attr("transform",function(d){ 
 
        return "translate("+arc.centroid(d)+")"; 
 
       }) 
 
       .attr("text-anchor","middle") 
 
       .text(function(d){ 
 
        return d.data; 
 
       }); 
 
    </script>  
 
</body> 
 
</html>

來源

2016-12-05 07:30:37

謝謝你的幫助~~但是，當我推斷你的介紹時，它仍然不起作用。另外，如果我使用你的代碼，會出現一個錯誤：未捕獲的TypeError：顏色不是函數 – Charlie

它在代碼片段中工作，你應該可以運行它。無論如何，你可以嘗試第二種解決方案（請記住，我告訴你2個解決方案，而不是2個步驟，選擇其中之一）。無論如何，祝你好運。 –

謝謝你的幫助~~現在，它可以工作，謝謝~~ – Charlie

爲什麼派的顏色不變？

回答

相關問題