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。< / p>

在D3中绘制分层弧

1 个答案: