D3饼段分区

Question

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

我不确定实际上会有什么帮助，因为我对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;
});

Answer 1

您可能需要使用多个弧段。使用内部和外部可以将弧线缩小到一个漂亮的圆形部分。 outerRadius函数

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

可能会沿着这些方向跑：https://jsfiddle.net/8w63jtx1/1/