D3.js环形图无法从字典列表结构的JSON文件加载数据

我帮你排查了代码里的几个关键问题，正是这些细节导致图表无法正常渲染：

核心错误点解析 #

• 误用d3.entries(data)：你的JSON已经是字典列表结构，但d3.entries()是用来把单一键值对对象转换成数组的工具，用它处理你的数组会直接破坏原数据结构，让饼图生成器无法正确解析数值。
• count值是字符串类型：你的JSON里count是字符串格式（比如"55433"），但D3的饼图生成器需要数值类型，字符串会被当作无效值处理，导致没有数据可渲染。
• 数据字段访问路径错误：经过pie()处理后，原数据会被包裹在每个元素的data属性里，所以你需要用d.data.facet而非d.facet来访问标签，用d.data.count访问数值。

修改后的完整代码 #

<div id="chart"></div> <!-- div containing the donut chart -->
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
// set the dimensions and margins of the graph
var width = 450,
    height = 450,
    margin = 40

// The radius of the pieplot is half the width or half the height (smallest one) minus margin.
var radius = Math.min(width, height) / 2 - margin

// append the svg object to the div called 'chart'
var svg = d3.select("#chart")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Parse the Data
d3.json("/data/all-facet-digitized.json", function(data) {

  // 把字符串类型的count转换为数值类型
  data.forEach(function(d) {
    d.count = +d.count;
  });

  // set the color scale
  var color = d3.scaleOrdinal()
    .domain(["true","false"])
    .range(d3.schemeDark2);

  // Compute the position of each group on the pie:
  var pie = d3.pie()
    .sort(null) // Do not sort group by size
    .value(function(d) { return d.count; })

  // 直接传入原数组，无需d3.entries()处理
  var data_ready = pie(data)

  // The arc generator
  var arc = d3.arc()
    .innerRadius(radius * 0.5) // This is the size of the donut hole
    .outerRadius(radius * 0.8)

  // Another arc that won't be drawn. Just for labels positioning
  var outerArc = d3.arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9)

  // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
  svg
    .selectAll('allSlices')
    .data(data_ready)
    .enter()
    .append('path')
      .attr('d', arc)
      .attr('fill', function(d){ return color(d.data.facet) }) // 修正字段访问路径
      .attr("stroke", "white")
      .style("stroke-width", "2px")
      .style("opacity", 0.7)

  // Add the polylines between chart and labels:
  svg
    .selectAll('allPolylines')
    .data(data_ready)
    .enter()
    .append('polyline')
      .attr("stroke", "black")
      .style("fill", "none")
      .attr("stroke-width", 1)
      .attr('points', function(d) {
        var posA = arc.centroid(d) // line insertion in the slice
        var posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that
        var posC = outerArc.centroid(d); // Label position = almost the same as posB
        var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left
        posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left
        return [posA, posB, posC]
      })

  // Add the text labels:
  svg
    .selectAll('allLabels')
    .data(data_ready)
    .enter()
    .append('text')
      .text( function(d) { return d.data.facet; }) // 修正字段访问路径
      .attr('transform', function(d) {
        var pos = outerArc.centroid(d);
        var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
        pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1);
        return 'translate(' + pos + ')';
      })
      .style('text-anchor', function(d) {
        var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
        return (midangle < Math.PI ? 'start' : 'end')
      })

})
</script>

关键修改说明 #

1. 移除d3.entries(data)：直接将你的字典数组传入pie()函数即可，d3.pie()本身就支持处理数组类型的数据。
2. 转换count为数值：通过forEach遍历数据，用+d.count快速把字符串类型的count转换为数值。
3. 修正数据字段访问路径：所有需要调用原数据的地方，都改为d.data.xxx格式，因为pie()处理后会把原数据存储在每个元素的data属性中。

这样调整后，你的环形图应该就能正常渲染出预期效果了。

内容的提问来源于stack exchange，提问作者relizt