在D3中绘制分层弧

Question

我想用 d3.js 创建一个图表，看起来像这样：http://jsfiddle.net/g0r9n090/111/

图表应包含多个图层，如下所示：http://jsfiddle.net/rq7s1e6j/

如何创建一个具有这种“间隙”的图表，就像弧线一样，但有多个层，就像最后的小提琴一样？

最后一张图表的代码：

var dataset = {
    apples: [53245, 28479, 19697, 24037, 40245],
    oranges: [53245, 28479, 19697, 24037, 40245],
    lemons: [53245, 28479, 19697, 24037, 40245],
    pears: [53245, 28479, 19697, 24037, 40245],
};

var width = 600,
    height = 400,
    cwidth = 45;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("stroke-width", "2")
    .attr("stroke", "#fff")
    .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")
        .attr("fill", function (d, i) { return color(i); })
        .attr("d", function (d, i, j) {
            return arc.innerRadius(cwidth * j).outerRadius(cwidth * (j + 1))(d);
        });

任何可以让我更接近目标的帮助，我们不胜感激！ :)

Answer 1

饼图布局还允许您设置开始和结束角度，以便您可以执行以下操作以在饼图中创建间隙：

 var pie = d3.layout.pie()
    .sort(null)
    .startAngle(-40 * (Math.PI/180))
    .endAngle(270 * (Math.PI/180));

看起来像这样：http://jsfiddle.net/y1no35mw/1/

您只能在弧生成器上设置innerRadius 属性，因此要添加一个空心中心，您可以为所有单独的弧添加一个inner_radius 偏移量，如下所示：

var inner_radius = 20;    
gs.selectAll("path").data(function (d) { return pie(d); })
        .enter().append("path")
        .attr("fill", function (d, i) { return color(i); })
        .attr("d", function (d, i, j) {
            return arc
                .innerRadius(cwidth * j + inner_radius)
                .outerRadius(cwidth * (j + 1) + inner_radius)(d);
        });

这里又一次发挥作用了：http://jsfiddle.net/y1no35mw/2/

此外，如果您希望内半径具有 cwidth，您只需乘以 (j+1) 和 (j+2)，然后就不需要添加 inner_radius。