D3.js 数据结构，用于分割框架圆环图

Question

I am trying to create a series of 10 individual donut charts. Simplified to two below:

 var margins = {top:20, bottom:300, left:30, right:150}; var height = 600; var width = 900; var totalWidth = width+margins.left+margins.right; var totalHeight = height+margins.top+margins.bottom; var data = [ {'name':'USA', 'split':[{'security':'equity','value':93.95},{'security':'fi','value':68.8}]}, {'name':'China', 'split':[{'security':'equity','value':40},{'security':'fi','value':60}]}, ]; var colorScale = d3.scaleOrdinal(["#4f81b9","#b8cce4","#4f81b9","#95b3d7","#b8cce4","#e7eef8"]); var svg = d3.select("body").selectAll(null).data(data).enter().append('svg').attr('width', totalWidth).attr('height', 200).style("display", "block"); var radius = 65; var arc = d3.arc().outerRadius(radius*1.06).innerRadius(radius*.8); var pie = d3.pie().sort(null).value(function(d) { console.log([d.split]) return [d.split]; }); var arcG = svg.selectAll(".arc").data(pie(data)).enter().append("g").attr("transform", "translate(" + (160) + "," + (100) + ")").attr("class", "arc"); arcG.append("path").attr("d", arc).attr("fill", function(d) { return colorScale(d.data.security); });

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

Each donut is supposed to depict the ratio of two categories, as seen in the split array:

var data = [
  {'name':'USA', 'split':[{'security':'equity','value':93.95},{'security':'fi','value':68.8}]},
  {'name':'China', 'split':[{'security':'equity','value':40},{'security':'fi','value':60}]},
];

No errors were thrown at me, but clearly the data structure and slice mechanism is flawed -- nothing is appended.

Question

What is a viable reconfiguration to the data structure and/or donut slice that allows me to access split iteratively?

Answer 1

The problem is that you're trying to use the pie generator with the outer array, and that won't work (look at the NaN for the value):

 var data = [{ 'name': 'USA', 'split': [{ 'security': 'equity', 'value': 93.95 }, { 'security': 'fi', 'value': 68.8 }] }, { 'name': 'China', 'split': [{ 'security': 'equity', 'value': 40 }, { 'security': 'fi', 'value': 60 }] }, ]; var pie = d3.pie().sort(null).value(function(d) { return d.value; }); console.log(pie(data));

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

Instead of that, use the pie generator with each inner split array, creating an "enter" selection for the paths inside the groups:

 var margins = { top: 20, bottom: 300, left: 30, right: 150 }; var height = 600; var width = 900; var totalWidth = width + margins.left + margins.right; var totalHeight = height + margins.top + margins.bottom; var data = [{ 'name': 'USA', 'split': [{ 'security': 'equity', 'value': 93.95 }, { 'security': 'fi', 'value': 68.8 }] }, { 'name': 'China', 'split': [{ 'security': 'equity', 'value': 40 }, { 'security': 'fi', 'value': 60 }] }, ]; var colorScale = d3.scaleOrdinal(["#4f81b9", "#b8cce4", "#4f81b9", "#95b3d7", "#b8cce4", "#e7eef8"]); var svg = d3.select("body").selectAll(null).data(data).enter().append('svg').attr('width', totalWidth).attr('height', 200).style("display", "block"); var radius = 65; var arc = d3.arc().outerRadius(radius * 1.06).innerRadius(radius * 0.8); var pie = d3.pie().sort(null).value(function(d) { return d.value; }); var arcG = svg.selectAll(".arc").data(data).enter().append("g").attr("transform", "translate(" + (160) + "," + (100) + ")").attr("class", "arc"); arcG.selectAll(null).data(function(d) { return pie(d.split) }).enter().append("path").attr("d", arc).attr("fill", function(d) { return colorScale(d.data.security); });

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