Question

为了学习D3.js，我拿走了this example并从中取出了一个龙头 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越大，它们就越接近。

标签不适合Pie

1 个答案: