如何在NVD3.js饼图中显示当前所选系列的总和？

我想在NVD3.js饼图中显示当前所选系列的总和。如何在NVD3.js饼图中显示当前所选系列的总和？

考虑以下数据：

[ 
    { "label": "One", "value": 100 }, 
    { "label": "Two", "value": 200 }, 
    { "label": "Three", "value": 300 } 
]

我想当选择了所有系列以饼图的中间显示的600的合计值。但是，当，比如我取消系列“一”，我想总价值进行更新，以500

我可以在我的react.js组件使用title属性显示初始总价值：

const getTotal =() => { 
    return d3.sum(data, (d) => d.value); 
}; 

return (
    <div> 
    <NVD3Chart 
     title={getTotal()} 
     type="pieChart" 
     datum={data} 
     x="label" 
     y="value" 
     donut 
     donutRatio="0.4" 
    /> 
    </div> 
);

但是，当用户选择或取消选择图表系列的数据系列时，我无法找到动态更新总值的方法。

有没有办法动态更新标题以匹配图表中所选系列的总和？

链接到我的小提琴：http://jsfiddle.net/ghmpo42k/210/

来源

2017-05-31 Natalie

你可以发布plunkr/js小提琴吗？你想挂钩onChange处理程序。 – jeznag

@jeznag链接到我的小提琴：http://jsfiddle.net/ghmpo42k/210/ – Natalie

阵营的心不是知道里面nvd3.js您的修改，所以重新渲染。我不知道是否有任何方法“updateTitle”为nvd3.js（这将是最好的使用）。如果在不使用setState的情况下渲染发生变化（例如在不更改引用的情况下更改您的状态下的节点），则可以调用this.forceUpate（），它将强制重新渲染组件。

请注意，应该尽可能地避免这种情况。

来源

2017-05-31 12:07:56 Nevosis

如何在NVD3.js饼图中显示当前所选系列的总和？

回答

相关问题