无法在圆环图中可视化标签 - D3答案

【问题标题】：Unable to visualize label in donut chart - D3无法在圆环图中可视化标签 - D3
【发布时间】：2016-01-12 04:00:56
【问题描述】：

我正在尝试使用 d3 绘制圆环图，基于以下两个示例：

http://bl.ocks.org/mbostock/3887193 http://jsfiddle.net/ragingsquirrel3/qkHK6/

但是，我看不到数据的标签。这里可以找到一个最小的例子：

我想知道我错过了什么。

jsonArr = [{
  "label": "13",
  "value": 13.17435599605977
}, {
  "label": "11",
  "value": 10.599857294624265
}, {
  "label": "16",
  "value": 16.06213289774901
}, {
  "label": "14",
  "value": 13.511044375821099
}, {
  "label": "11",
  "value": 10.664713102997277
}, {
  "label": "15",
  "value": 14.563786284297807
}, {
  "label": "16",
  "value": 16.00697524769618
}, {
  "label": "14",
  "value": 14.359596161811186
}, {
  "label": "16",
  "value": 16.30948044715333
}, {
  "label": "12",
  "value": 11.667434335739946
}, {
  "label": "9",
  "value": 8.906828269284498
}, {
  "label": "12",
  "value": 12.184727712259644
}, {
  "label": "29",
  "value": 28.91564471677896
}, {
  "label": "15",
  "value": 14.794540561843725
}, {
  "label": "7",
  "value": 6.75160611562344
}, {
  "label": "15",
  "value": 15.200055092907874
}, {
  "label": "41",
  "value": 41.432547293738104
}, {
  "label": "12",
  "value": 11.871964986439362
}]

var colorrange = [
  "#7f3b08",
  "#a50026",
  "#d73027",
  "#f46d43",
  "#fdae61",
  "#fee090",
  "#ffffbf",
  "#ffffff",
  "#e0f3f8",
  "#abd9e9",
  "#74add1",
  "#4575b4",
  "#4575b4",
  "#d8daeb",
  "#b2abd2",
  "#8073ac",
  "#542788",
  "#000000"
];


data = jsonArr;

var width = 300,
  height = 300,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(colorrange);

var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 70);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.value;
  });

var svg = d3.select("#info").attr("align", "center").append("svg")
  .attr("class", "piechart")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");

g.append("path")
  .attr("d", arc)
  .style("fill", function(d, i) {
    return color(i);
  });

g.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .text(function(d) {
    return d.label;
  });

【问题讨论】：

标签： javascript d3.js pie-chart donut-chart

【解决方案1】：

需要在第122行返回d.data.label，标签在数据对象下。

g.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .text(function(d) {
      return d.data.label;
  });

https://jsfiddle.net/ermineia/g6vyk7t1/1/

【讨论】：

这就是布局的工作方式。您提供所需的数据，然后提供访问器函数以从数据中提取该值： function(d) { return d.label;} 但是，当您访问布局构建的节点内容时，该值是弧特定的数据，您的数据被封装在该对象的数据属性中（您的标签恰好所在的位置）。