我是 D3 和 Javascript 的新手，我想弄清楚为什么这段代码不起作用。错误似乎在最后一个匿名函数中。用a作品替换它
有什么建议吗？
var pi = Math.PI;
var cornerRadius = 20;
var spaceAngle = 10
var percents = [40, 60, 76]
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
function deriveArcs(angle, i) {
var arc = d3.svg.arc()
.innerRadius(180 + i * spaceAngle)
.outerRadius(240 + i * spaceAngle)
.cornerRadius(cornerRadius)
.startAngle(-pi * 0.5)
.endAngle(-pi * 0.5 + angle / 100 * pi);
return arc;
}
var a = deriveArcs(30, 0)
g.selectAll("path")
.data(percents)
.enter()
.append("path")
.attr("d",
function(d, i) {
console.log(d+" "+i)
var aa = deriveArcs(d, i);
return aa;
}
);
铬错误：
d3.min.js:1 错误：属性 d：预期的移动路径命令（'M' 或 'm'），“函数 n(){var...”。a @ d3.min.js:1 (匿名) @ d3.min.js:3 Y @ d3.min.js:1 Aa.each @ d3.min.js:3 Aa.attr @ d3.min.js: 3（匿名）@ pie.js:30 pie.js:32 60 1
在你的derivedArcs函数中，当你这样做时：
return arc;
您只是返回弧生成器函数本身，而不是它的值。
话虽如此，它应该是：
return arc();
它执行弧生成器函数并返回正确的路径。
这是您仅进行该更改的代码：
var pi = Math.PI;
var cornerRadius = 20;
var spaceAngle = 10
var percents = [40, 60, 76]
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
function deriveArcs(angle, i) {
var arc = d3.svg.arc()
.innerRadius(180 + i * spaceAngle)
.outerRadius(240 + i * spaceAngle)
.cornerRadius(cornerRadius)
.startAngle(-pi * 0.5)
.endAngle(-pi * 0.5 + angle / 100 * pi);
return arc();
}
var a = deriveArcs(30, 0)
g.selectAll("path")
.data(percents)
.enter()
.append("path")
.attr("d",
function(d, i) {
return deriveArcs(d, i);
}
);<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="500" height="500"></svg>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句