为什么派的颜色不变？

我是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

为什么派的颜色不变？

回答

相关问题