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

Question

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

考虑以下数据:

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

当选择所有系列时，我想在饼图中间显示总计 600 的值。但是，例如，当我取消选择系列“One”时，我希望将总值更新为 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>
);

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

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

链接到我的 fiddle :http://jsfiddle.net/ghmpo42k/210/

Answer 1

React 不知道你在 nvd3.js 中的修改，所以会重新渲染。我不知道 nvd3.js 是否有任何方法“updateTitle”(这将是最好的用途)。如果在没有使用 setState 的情况下渲染发生了变化(例如更改状态下的节点而不更改其引用)，您可以调用 this.forceUpate()，它将强制重新渲染您的组件。

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