D3.js Sunburst-Partition Rendern falsch

Ich bin gerade dabei, die Bilevel Partition Sunburst-Diagramm here von Version 3 zu Version 4 von D3.j konvertieren. Ich benutze die gleichen Daten wie im Beispiel und möchte einfach das innere Kreisdiagramm mit 10 Kindern erstellen, aber es scheint, als würde ein Problem mit den Bogengrößen auftreten. Ich habe ein Beispiel meines Codes, der mit dem Fehler an dieser js Geige läuft: JSFiddle. Hier ist auch der Code:D3.js Sunburst-Partition Rendern falsch

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<script src="//d3js.org/d3.v4.min.js"></script> 
<script> 

var margin = {top: 350, right: 480, bottom: 350, left: 480}, 
    radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 10; 

var hue = d3.scaleOrdinal(d3.schemeCategory10); 

var svg = d3.select("body").append("svg") 
       .attr("width", margin.left + margin.right) 
       .attr("height", margin.top + margin.bottom) 
      .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var arc = d3.arc() 
    .startAngle(function(d) 
    { 
     return d.x0; 
    }) 
    .endAngle(function(d) 
    { 
     return d.x0 + d.x1; 
    }) 
    .padAngle(.01) 
    .padRadius(radius/3) 
    .innerRadius(function(d) 
    { 
     return radius/3 * d.depth; 
    }) 
    .outerRadius(function(d) 
    { 
     return radius/3 * (d.depth + 1) - 1; 
    }); 

d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/490fffd1ae637d3275aa9eaa8b0487147717dd40/flare.json", function(error, root) { 

    if(error) 
    { 
    throw error; 
    } 

    root = d3.hierarchy(root) 
      .sum(function (d) 
      { 
       return d.size; 
      }); 

    var partition = d3.partition() 
        .size([2 * Math.PI, radius]); 

    var nodes = partition(root) 
       .descendants() 
       .slice(1, 11); 


    var path = svg.selectAll("path") 
     .data(nodes) 
     .enter().append("path") 
     .attr("d", arc) 
     .style("fill", function(d) 
     { 
      return hue(d.data.name); 
     }); 

}); 

</script>

Statt alle Daten des Verwendens ich eher var nodes = partition(root).descendants().slice(1, 11); nenne, die die Knoten, die alle zurückgibt, die eine Tiefe von 1 haben das ist, was das Bild sieht aus wie das ist falsch:

Allerdings, wenn ich nur die Scheibe bis 9 Elemente anstelle von 10 zu verwenden, ändern:

var nodes = partition(root).descendants().slice(1, 10);

Dann wird das Bild wie sieht es fast richtig ist, mit einem fehlenden Bogen.

Dies führt mich zu glauben, etwas sein kann, mit den Bögen zu tun, aber ich bin nicht ganz sicher. Jede Hilfe wird sehr geschätzt.

Danke!

Quelle

2017-07-17 ans

Ersetzen Sie einfach

.endAngle(function(d,i) 
    { 
     return d.x0 + d.x1; 
    })

von

.endAngle(function(d,i) 
     { 
      return d.x1; 
     })

Quelle

2017-07-18 05:55:38

D3.js Sunburst-Partition Rendern falsch

Antwort

Verwandte Themen