D3 В4 Санберст расчет схема расположения дуги

Question

Это код, чтобы вычислить координаты солнечных лучей узлов:

var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 

Где:

х: минимальная х-координата положения узла

у: минимальный у-координата узла

де: х-масштаб положения узла

д: у-степень от положения узла

---

Однако в последнее время Выпущенных версий v4, пространство заполнения макетов d3.treemap и d3.partition теперь выходную x0, x1, y0, y1 на каждый узел вместо x0, y0, ого, д

node.x0 - левый край прямоугольника

node.y0 - верхний край прямоугольника

node.x1 - правый край прямоугольника

node.y1 - нижний край прямоугольника

Каким будет код коррекции для v4, поскольку следующее не создает правильную компоновку?

var arc = d3.arc() 
    .startAngle(function(d) { return d.x0; }) 
    .endAngle(function(d) { return d.x0 + (d.x1 - d.x0); }) 
    .innerRadius(function(d) { return d.y0; }) 
    .outerRadius(function(d) { return d.y0 + (d.y1 - d.y0); }); 

См codepen

Answer 1

См codepen

var data = {...} 

var width = 960; 
var height = 700; 
var radius = Math.min(width, height)/2; 
var color = d3.scaleOrdinal(d3.schemeCategory20c) 

var g = d3.select('#container') 
    .append('svg') 
    .attr('width', width) 
    .attr('height', height) 
    .append('g') 
    .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')'); 

var partition = d3.partition() 
    .size([360, radius]) 
    .padding(0) 
    //.round(true); //this will produce weird leaf node size if true 

var root = d3.hierarchy(data, function(d) { return d.children }) 
    .sum(function(d) {    
     if(d.children) { 
      return 0 
     } else {       
      return 1 
     } 
    }) 
    .sort(null); 

partition(root) 

var xScale = d3.scaleLinear() 
    .domain([0, radius]) 
    .range([0, Math.PI * 2]) 
    .clamp(true); 

var arc = d3.arc() 
    .startAngle(function(d) { return xScale(d.x0) }) 
    .endAngle(function(d) { return xScale(d.x1) }) 
    .innerRadius(function(d) { return d.y0 }) 
    .outerRadius(function(d) { return d.y1 }) 

var path = g.selectAll('path') 
    .data(root.descendants()) 
    .enter().append('path') 
     .attr("display", function(d) { return d.depth ? null : "none"; }) 
     .attr("d", arc) 
     .attr("fill-rule", "evenodd") 
     .style('stroke', '#fff') 
     .style("fill", function(d) { return color((d.children ? d : d.parent).data.name); })