javascript - D3 Pie段分区

我想创建一个饼图，其中每个饼图段都有单独的分区。这是我需要复制的图像。



我不确定什么是真正的帮助，因为我刚接触D3。

我正在处理此基本饼图-

https://jsfiddle.net/kyleopperman/8w63jtx1/

var w = 400;
var h = 400;
var r = h / 2;
var color = d3.scale.category20c();

var data = [{
  "label": "Category A",
  "value": 50,
  "value2": 10
}, {
  "label": "Category B",
  "value": 50,
  "value2": 10
}, {
  "label": "Category C",
  "value": 50,
  "value2": 10
}];


var vis = d3.select('#chart')
  .append("svg")
  .data([data])
  .attr("width", w)
  .attr("height", h)
  .append("svg:g")
  .attr("transform", "translate(" + r + "," + r + ")");

var pie = d3.layout.pie().value(function(d) {
  return d.value;
});

var pie2 = d3.layout.pie().value(function(d) {
  return d.value2;
})

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
// select paths, use arc generator to draw
var arcs = vis
  .selectAll("g.slice")
  .data(pie2)
  .enter()
  .append("svg:g")
  .attr("class", "slice")

var partition = d3.layout.partition()
    .size([2 * Math.PI, r * r])
    .value(function (d) {
        return d.size;
    });

arcs.append("svg:path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d) {
    return arc(d);
  });


// add the text
arcs.append("svg:text").attr("transform", function(d) {
  d.innerRadius = 0;
  d.outerRadius = r;
  return "translate(" + arc.centroid(d) + ")";
}).attr("text-anchor", "middle").text(function(d, i) {
  return data[i].label;
});

最佳答案

您可能需要处理多层弧段。使用inner＆outerRadius函数可以将圆弧缩小到一个不错的圆弧段

var arc = d3.svg.arc().outerRadius(r).innerRadius(100);

可能遵循以下原则：https://jsfiddle.net/8w63jtx1/1/