D3 Examples - Pie Padding

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <style>
    path {
      shape-rendering: crispEdges
    }
​
    
    
</style>
</head>
​
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var data = [
  { "slice": 1, "segment": 1, "value": 5},
  { "slice": 1, "segment": 2, "value": 10},
  { "slice": 1, "segment": 3, "value": 10},
  { "slice": 2, "segment": 1, "value": 10},
  { "slice": 2, "segment": 2, "value": 5},
  { "slice": 2, "segment": 3, "value": 10},
  { "slice": 3, "segment": 1, "value": 10},
  { "slice": 3, "segment": 2, "value": 10},
  { "slice": 3, "segment": 3, "value": 20},
  { "slice": 4, "segment": 1, "value": 10},
  { "slice": 4, "segment": 2, "value": 10},
  { "slice": 4, "segment": 3, "value": 10}
];
  
var nestBySlice = d3.nest()
    .key(function(d) { return d.slice; })
  .entries(data);
  
const dataLength = nestBySlice.length;
    
nestBySlice.forEach(function(d){
  d.total = 0
  let offset = 0;
  d.values.forEach(function(v){
    d.total = d.total + v.value;
    v.offset = offset
    offset = offset + v.value;
  });
});
​
var pieData = []
​
nestBySlice.forEach(function(d){
  d.values.forEach(function(v){
    let s = {}
    s.segment = v.segment;
    s.slice = d.key;
    s.offset = v.offset;
    s.value = v.value;
    s.total = d.total;
    pieData.push(s)
  })
});
 
var nestBySegment = d3.nest()
    .key(function(d) { return d.segment; })
  .entries(pieData);
  
nestBySegment.forEach(function(d){
  let minOffset = d3.min(d.values, function(s){ return s.offset })
  d.values.forEach(function(v){
    v.minOffset = minOffset
  })
})
  
var maxTotal = d3.max(nestBySlice, function(d){ return d.total });
  
var width = 800;
var height = width;
var radius = height / 2 - 10;
  
var innerRadius = 20;
  
var rScale = d3.scaleLinear()
    .range([innerRadius, radius])
    .domain([0, maxTotal])
​
var padding = .1;
var paddingArcLength = padding * (((innerRadius + radius)) * 2 * Math.PI);
var paddingArcAngle = paddingArcLength / innerRadius; //radians
const paddingChordLength = 2 * innerRadius * Math.sin((paddingArcAngle/2))
console.log("p " + paddingChordLength);
  
    
var arc = d3.arc()
    .innerRadius(function(d){
      return rScale(d.data.offset) 
    })
    .outerRadius(function(d){ 
      return rScale(d.data.offset + d.data.value) });
​
var color = d3.scaleOrdinal(d3.schemeCategory10);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
nestBySegment.forEach(function(segment){
  
  segment.values.forEach(function(slice, sliceNumber){
    
    let tempRadius = slice.offset + (slice.value/2);
    console.log(tempRadius)
    
    let tempRadiusPX = rScale(tempRadius);
    
    let tempCircumference = tempRadiusPX * 2 * Math.PI;
    console.log(tempCircumference)
    
    let tempArcAngle = 2 * Math.asin(paddingChordLength/(2 * tempRadiusPX))
    console.log("a " + tempArcAngle)
    
    let tempArcLength = tempRadiusPX * tempArcAngle
        console.log(tempArcLength)
    
    let tempPadding = (tempArcLength/tempCircumference)
    console.log(tempPadding);
    
    let tempPieData = [];
    let i = 0;
    for (i; i < dataLength; i++){
      tempPieData.push(slice)
    };
    
    let tempPie = d3.pie()
      .value(1)
      .padAngle(tempPadding)
​
    let tempPieValues = tempPie(tempPieData);
    
    svg.append("g")
            .selectAll("path")
        .data(tempPieValues)
    .enter()
        .append("path")
        .style("fill", function(d) { 
        return color(d.data.segment); 
      })
        .style("opacity", function(d,i) { 
        return i == sliceNumber ? 1 : 0; 
      })
        .attr("d", arc);
        
  });
  
})
  
</script>
​
    