在D3中绘制分层圆弧

Question

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

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

如何创建具有此 "gap" 的图表，如圆弧，但具有多个图层，如上一个 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

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

 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 加法.

在D3中绘制分层圆弧

Draw layered arc in D3

javascript

graph

d3.js