D3 V4 Sunburst Diagramm-Layout arc Berechnungs

Question

Dies ist der Code, um die Koordinaten des sunburst Knoten zu berechnen:

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

Wo:

x: die minimale x-Koordinate der Knotenposition

y: die minimale y-Koordinate der Knotenposition

dx: die x-Ausdehnung der Knotenposition

dy: die Y-Ausdehnung der Knotenposition

---

jedoch in der kürzlich Version v4 realeased, die raumfüllende Layouts d3.treemap und d3.partition nun Ausgang x0, x1, y0, y1 on jeder Knoten anstelle von x0, dx, y0, dy

node.x0 - die linke Kante des Rechtecks ​​

node.y0 - der obere Rand des Rechtecks ​​

node.x1 - der rechte Rand des Rechtecks ​​

node.y1 - die untere Kante des Rechtecks ​​

Was wäre der entsprechende Code für v4, da das folgende nicht das richtige Layout liefert?

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

Siehe codepen

Answer 1

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