如何为 angular-nvd3 自定义饼图中的图例文本？

Question

我在 angular-nvd3 中有一个饼图。 https://krispo.github.io/angular-nvd3/#/pieChart 我遇到的问题是饼图，我有 5 个切片，当所有饼图切片都被标记时，它看起来非常挤在一起。我想改为修改图例，以便不只是显示键，我想显示：

<key> + <number of records in that key>

使用"labelType"我可以更改切片饼图标签上显示的内容，但如何更改图例中显示的内容？

Answer 1

无法在 API 中找到执行此操作的任何内容。

但是这里有一些技巧可以通过 d3 来实现：

渲染后

1) 获取所有文本DOM

2) 运行所有文本的 for 循环。

3) 获取文本的数据并更改内部 HTML.

  dispatch: {
    renderEnd: function(e) {
      //for each text
      d3.selectAll(".nv-legend text")[0].forEach(function(d){
        //get the data
        var t= d3.select(d).data()[0];
        //set the new data in the innerhtml
        d3.select(d).html(t.key + " - " + t.y);
      });
    }
  }

工作代码here

如何为 angular-nvd3 自定义饼图中的图例文本？

How to customize legend text in pie chart for angular-nvd3?

d3.js

nvd3.js

angular-nvd3