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>
);

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

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

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

Answer 1

React不知道你在nvd3.js中的修改，所以有重新渲染。我不知道是否有任何方法＆＃34; updateTitle＆＃34;对于nvd3.js（这将是最好的用途）。如果渲染中没有使用setState进行更改（比如更改状态下的节点而不更改其引用），则可以调用this.forceUpate（），它将强制重新渲染组件。

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

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

1 个答案: