我是 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>
我想绘制这样的饼图:
但我的是这样的:
所以我很困惑，因为控制台没有错误。你知道为什么颜色没有出现在我的饼图中吗？如果您帮我解决这个问题，我将不胜感激。谢谢!
最佳答案
解决d3.schemeCategory10到d3.schemeCategory10中的拼写错误后有2种可能的解决方案:
- 您可以尝试将比例序号从
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>关于javascript - 为什么馅饼的颜色没有改变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40968903/