旭日形不完整段答案

【问题标题】：Sunburst incomplete Segments旭日形不完整段
【发布时间】：2020-08-25 21:10:30
【问题描述】：

我一直试图了解 d3 v5 sunburst 中使用的 arc 函数，但我无法完全理解它。我可以画出旭日形，但是一旦它超过 1 的深度，弧线就不完整了。它们似乎大约是正在进行的部分大小的一半。有人可以解释一下我在这里缺少的部分吗？

let data = {
  "name": "DEMO",
  "children": [{
      "Build": "1",
      "value": "90",
      "children": [{
        "Build": "1",
        "value": "70",
        "children": [{
          "Build": "1",
          "value": "60",
        }]
      }]
    },
    {
      "Build": "2",
      "value": "95",
      "children": [{
        "Build": "2",
        "value": "85",
        "children": [{
          "Build": "2",
          "value": "65",
        }]
      }]
    }
  ]
}

function createSunBurst(data) {

  let container = document.getElementById("container")
  let width = 200
  let height = 200
  let radius = (Math.min(width, height) / 2) - 5
  let format = d3.format(",d")

  let partition = data => d3.partition()
    .size([2 * Math.PI, radius])(d3.hierarchy(data)
      .sum(d => d.value)
      .sort((a, b) => b.value - a.value))

  let root = partition(data)

  d3.select("#container")
    .append("svg")

  let svg = d3.select("svg")
    .style("width", "100%")
    .style("height", "100%")
    .attr("id", "canvas")
    .append("g")
    .attr("class", "center-group")

  let arc = d3.arc()
    .startAngle(d => d.x0)
    .endAngle(d => d.x1)
    .innerRadius(d => d.y0)
    .outerRadius(d => d.y1 - 0)

  svg.selectAll("path")
    .data(root.descendants().filter(d => d.depth))
    .enter()
    .append("path")
    .attr("stroke", "white")
    .attr("fill", "green")
    .style("fill-rule", "evenodd")
    .attr("d", arc)

}

createSunBurst(data)

#container {
  height: 100vh;
}

.center-group {
  transform: scale(1, 1) translate(50%, 50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div id="container">
</div>

【问题讨论】：

标签： javascript d3.js sunburst-diagram

【解决方案1】：

自发布此消息以来，我一直在研究。我已经解决了我的问题。弧线不是问题。相反，问题在于我最初计算分区数据总和的方式。

阅读此answer 后我解决了我的问题。

【讨论】：