javascript - 在D3中绘制分层圆弧

Question

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

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

如何创建一个图表，它具有这种“间隙”，如弧线，但具有多层，如最后一个 fiddle ？

最后一张图表的代码:

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

饼图布局还允许您设置开始和结束 Angular ，因此您可以执行以下操作在饼图中创建间隙:

 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 了。