Question

我目前正在将Bilevel分区旭日形图here从版本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 个答案: