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/