使用D3.js v4创建多层环形图报错：路径命令缺失M/m

嘿，我看到你在创建多层环形图时碰到了这个attribute d: Expected moveto path command错误，别担心，这个问题很好解决，咱们来拆解一下问题根源和修复方案：

错误原因 #

你当前给path的d属性赋值时，只完成了弧生成器（arc generator）的参数配置，却没有把饼图数据传入生成实际的路径字符串。arc.innerRadius().outerRadius()是用来配置弧生成器的方法，它返回的还是弧生成器本身，而不是最终的路径指令——这就导致D3无法识别这个函数作为路径值，所以抛出了错误。

修正后的代码 #

var dataset = { "fir": [1, 2, 3, 4,2, 3, 1], "cloud": [1513606, 40000, 30000, 50600] };
var innerRadius = [100, 50];
var outerRadius = [150, 100];
var width = 960, height = 500, radius = height / 2 - 10;
// 初始化弧生成器，后续根据层级动态配置参数
var arc = d3.arc();
var pie = d3.pie();
var allColors = ['#DF3054', '#FF8E00', '#FFBD1D', '#EBE2B2', '#7DC3E6', '#7DC3E6', '#008CC8', '#00508E', '#8E26C9', '#E5E6ED', '#777980', '#F8E71C'];
var color = d3.scaleOrdinal(allColors);
var svg = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height)
 .append("g")
 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
gs.selectAll("path")
 .data ( function(d) { return pie(d); })
 .enter().append("path")
 .style("fill", function(d, i) { return color(i); })
 // 关键改动：先配置弧生成器的内外半径，再传入当前饼图数据d生成路径
 .attr("d", function(d, i, j) { 
     return arc.innerRadius(innerRadius[j]).outerRadius(outerRadius[j])(d); 
 });

关键改动说明 #

• 在给d属性赋值时，我们先通过arc.innerRadius(innerRadius[j]).outerRadius(outerRadius[j])为当前层级配置好弧的内外半径，然后立即调用这个配置好的弧生成器并传入饼图数据d，这样就能得到D3需要的路径字符串了。
• 如果你想让代码更清晰，还可以把半径参数绑定到每个层级的g元素上，不过上面的改动已经能解决你的核心问题啦。

内容的提问来源于stack exchange，提问作者ashutosh rathi