2017-05-31 5 views
1

NVD3.js Pie Chartで現在選択されているシリーズの合計を表示したいとします。NVD3.js Pie Chartで現在選択されているシリーズの合計を表示する方法は?

は、次のデータを考えてみましょう:

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

私は、すべてのシリーズが選択されている場合、円グラフの真ん中に600の合計値を表示したいと思います。

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> 
); 
:例えば、私はシリーズ「ワン」の選択を解除する場合、しかし、私は、合計値が500

私はreact.jsコンポーネントでtitle属性を使用して初期合計値を表示することができますに更新することを希望します

しかし、グラフの系列のデータ系列を選択または選択解除したときに、合計値を動的に更新する方法が見つかりませんでした。

チャート内の選択したシリーズの合計に一致するようにタイトルを動的に更新する方法はありますか?私のバイオリンに

リンク:http://jsfiddle.net/ghmpo42k/210/

+2

plunkr/js fiddleを投稿できますか?あなたはonChangeハンドラにフックしたいと思うでしょう。 – jeznag

+0

@jeznag my fiddleへのリンク:http://jsfiddle.net/ghmpo42k/210/ – Natalie

答えて

0

がnvd3.js内部のあなたの修正のイマイチ認識し反応するので、再レンダリングがあります。もしnvd3.jsのための "updateTitle"メソッドがあれば、それはわかりません(これが最適です)。 setStateを使用せずにレンダリングに変更がある場合(参照を変更せずに状態のノードを変更するなど)、this.forceUpate()を呼び出すと、コンポーネントの再レンダリングが強制されます。

これは可能な限り避けてください。

関連する問題