D3.js sunburst分區渲染不正確

我目前正在將Bilevel分區sunburst圖表here從版本3轉換爲D3.js版本4。我使用的是這個例子提供的相同數據，我只是想創建10個孩子的內部餅圖，但似乎遇到了弧大小的問題。我有我的代碼在這個js小提琴上運行錯誤的例子：JSFiddle。這裏也是代碼：D3.js sunburst分區渲染不正確

<!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>

而不是使用我的全部，而調用var nodes = partition(root).descendants().slice(1, 11);返回所有具有的1這是一個深度的節點的數據是什麼形象看起來這是不正確的：

但是，如果我改變片只用9個元素，而不是10：

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

然後圖像看起來幾乎是正確的，有一個丟失的弧。

這使我相信這可能是一些做的弧線，但我不能完全肯定。任何幫助將不勝感激。

謝謝！

來源

2017-07-17 ans

只需更換

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

通過

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

來源

2017-07-18 05:55:38

D3.js sunburst分區渲染不正確

回答

相關問題