D3.js sunburst分區渲染不正確

Question

我目前正在將這里的Bilevel分區朝陽圖從版本3轉換為D3.js的版本4。 我使用的是示例提供的相同數據，只是想創建帶有10個子級的內部餅圖，但似乎遇到了圓弧大小的問題。 我有一個示例代碼，該代碼運行此js小提琴時出現錯誤： JSFiddle 。 這也是代碼：

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

然后圖像看起來幾乎是正確的，只有一個缺失的弧。

這使我相信這可能與弧有關，但是我不確定。 任何幫助將不勝感激。

謝謝！

Answer 1

只需更換

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

通過

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

D3.js sunburst分區渲染不正確

問題描述

1 個解決方案

解決方案1
0 已采納 2017-07-18 05:55:38

D3.js sunburst分區渲染不正確

問題描述

1 個解決方案

解決方案1 0 已采納 2017-07-18 05:55:38

解決方案1
0 已采納 2017-07-18 05:55:38