CODEWITHSUNDEEP
javascriptd3.jscharts
KO.
KO.

Reputation: 173

D3 Pie segment partitioning

I want to create a pie chart that has seperate partitions for each of the pie segments. Here is the image that I need to replicate.

enter image description here

I'm unsure what will actually help as I'm quite new to D3.

I'm working off of this basic pie chart -

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;
});

Upvotes: 0

Views: 417

Answers (1)

octameter
octameter

Reputation: 161

You might have to work with several layers of arc segments. An arc can be narrowed down to a nice round segment, using the inner & outerRadius function

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

Might run along those lines: https://jsfiddle.net/8w63jtx1/1/

Upvotes: 2

Related Questions