D3 Tortensegmentpartitionierung

Question

Ich möchte ein Tortendiagramm erstellen, das für jedes Tortensegment separate Partitionen enthält. Hier ist das Bild, das ich replizieren muss.

Ich bin nicht sicher, was tatsächlich helfen, wie ich zu D3 ganz neu bin.

Ich arbeite dieses Grundkreisdiagramm aus -

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

Sie könnten mit mehreren Schichten von Bogensegmenten arbeiten. Ein Lichtbogen kann auf ein schönes rundes Segment verengt werden,

die innere & outerRadius Funktion

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

in diese Richtung führen kann: https://jsfiddle.net/8w63jtx1/1/