svg - 获取饼图剩余部分的百分比 - NVD3

Question

在我的饼图的某些情况下，我想向用户显示相对于饼图切片的百分比，而不是显示切片的值。

例如：我的馅饼中有三个切片：A代表 70% 的馅饼、B代表 15% 的馅饼和C代表 15% 的馅饼。

当我单击隐藏切片时，A我想向用户显示剩余切片的百分比，在本例中为B= 50% 和C= 50%。

NVD3可以吗？

重要提示：我不想在单击隐藏某些切片时重新加载图表。

Answer 1

您可以使用chart.tooltipContent来覆盖图表工具提示标签。以下内容改编自 NVD3 网站上的实时代码示例。http://nvd3.org/livecode/#codemirrorNav

示例：http ://plnkr.co/edit/UiGLIj?p=preview

nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true);

  chart.tooltipContent(function(key, x, obj){
    var enabledTotal = data[0].values
        .filter(function(item){return !item.disabled;})
        .reduce(function(a, b){return a + b.value}, 0);

    return Math.round((obj.value/enabledTotal) * 100) + "%";
  })

    d3.select("#chart svg")
        .datum(data)
      .transition().duration(1200)
        .call(chart);

  return chart;
});