D3旭日第二层不占据第一层的全宽

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

您的尺寸应仅适合儿童。儿童总和应该等于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