javascript - D3 sunburst 第二层不占据第一层的全宽

Question

我正在制作 D3 旭日图，内层是第一个类别，外层是第一个类别的子类别。例如在我的数据中，我想表明在所有样本中，有 67% 未验证和 33% 已验证，在已验证类别中，51% 是非法的，49% 是非法的，在未验证类别中，其中 36% 为低风险，20% 为中风险，44% 为高风险。我希望第二层占据它们在第一层中所属类别的整个宽度，但事实并非如此，我得到的是以下内容。

这是我的代码，有人可以为我指明正确的方向，让我知道如何获得我正在寻找的结果吗？谢谢。

var nodeData = {
  "name": "CATEGORY",
  "children": [{
    "name": "verified",
    "size": 33,
    "children": [{
      "name": "illegal",
      "size": 51
    }, {
      "name": "legal",
      "size": 49
    }]
  }, {
    "name": "unverified",
    "size": 67,
    "children": [{
      "name": "low risk",
      "size": 36
    }, {
      "name": "mid risk",
      "size": 20
    }, {
      "name": "high risk",
      "size": 44
    }]
  }]
};

var width = 500;
var height = 500;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory20b);
var g = d3.select('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

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

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

partition(root);
var arc = d3.arc()
  .startAngle(function(d) {
    return d.x0
  })
  .endAngle(function(d) {
    return d.x1
  })
  .innerRadius(function(d) {
    return d.y0
  })
  .outerRadius(function(d) {
    return d.y1
  });


g.selectAll('path')
  .data(root.descendants())
  .enter()
  .append('path')
  .attr("display", function(d) {
    return d.depth ? null : "none";
  })
  .attr("d", arc)
  .style('stroke', '#fff')
  .style("fill", function(d) {
    return color((d.children ? d : d.parent).data.name);
  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Answer 1

您的尺码应该只适合 child 。子项总和应等于 100。

var nodeData = {"name": "CATEGORY","children": [{
"name": "verified",
"children": [{
  "name": "illegal",
  "size": 33 * (51/100)
}, {
  "name": "legal",
  "size": 33 * (49/100) }]}, {
"name": "unverified",
"children": [{
  "name": "low risk",
  "size": 67 * (36/100)}, {
  "name": "mid risk",
  "size": 67 * (20/100)}, {
  "name": "high risk",
  "size": 67 * (44/100)}] }]};

这里是 fiddle