D3サンバーストの第2層は第1層の全幅を占めていません

Question

私はD3サンバーストプロットを作成しています。内側の層は第1のカテゴリ、外側の層は第1のカテゴリのサブカテゴリです。たとえば、私のデータでは、すべてのサンプルのうち、67％が未検証で33％が検証済みであり、51％が不法で、49％が未検証であることを示したい、そのうち36％が低リスク、20％が中期、44％が高リスクです。私は、第2層が第1層のカテゴリの全幅を占めることを期待していましたが、そうではありません。ここで

は私のコードで、誰かが多分私が探していた結果を取得する方法の右方向に私を指すことができますか？ありがとうございました。

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