javascript - 标签在饼图上不正确

Question

为了学习 D3.js，我拿这个例子做了一个 plunker http://plnkr.co/edit/ynWB0GznvrMMRmqkaqaA?p=preview

问题？

数据不正确，您可以看到数据不完整

我该如何解决？

Answer 1

首先是你的标签不正确。所以改变这个：

  .text(function(d) { 
    return 'd.data.age'; });

对此：

  .text(function(d) { 
    return d.data.age; });

你会得到正确的标签。

其次，标签被切断。这似乎与为饼图指定的大小有关。您可以增加指定的宽度（在 360 处看起来很好）：

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

或者使标签更靠近图表：

.attr("transform", function(d) { 
    return "translate(" + ( (radius -50) * Math.sin( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) + "," + ( -1 * (radius - 50) * Math.cos( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) + ")"; })

它所说的位置radius - x决定了标签在图表上的显示距离。x 越大，它们就越接近。