如何在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餅圖中顯示當前所選系列的總和？

回答

相關問題