馅饼上的标签不合适

Labels do not fit correctly on Pie

本文关键字：标签 不合适      更新时间：2023-09-26

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

问题?

数据不合适，你可以看到数据是不完整的

我该如何修理它?

第一件事是你的标签不正确。所以修改这个:

  .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越大，它们越接近。

相关文章：