nvd3 tickFormat 不适用于 reactjs

Question

我正在使用 react 版本 15.6.2 和 react-nvd3: ^0.5.7 我创建了一个 multiBarChart。我想将 Y-axis 的 tickformat 更改为完整整数。它以浮动 value.Please 的形式出现，请参阅附图。我希望数字是完整数字而不是浮点值。

我使用 tickFormat={d3.format('d') 此代码更改刻度格式。但是我还做不到。

我的代码如下：

<NVD3Chart
          id="barChart"
          type="multiBarChart"
          width={document.body.clientWidth-(document.body.clientWidth*0.13)}
          height={400}
          showLabel={false}
          stacked={true}
          showControls={true}
          showLegend={true}
          datum={this.state.activityOptions}
          color={['#3fceb1','#fff480']}
          x="label"
          y="values"
          reduceXTicks={false}
          tickFormat={d3.format('d')}/>

有人能帮忙吗？

Answer 1

您应该这样设置刻度格式：

<NVD3Chart
  id="barChart"
  type="multiBarChart"
  width={document.body.clientWidth-(document.body.clientWidth*0.13)}
  height={400}
  showLabel={false}
  stacked={true}
  showControls={true}
  showLegend={true}
  datum={this.state.activityOptions}
  color={['#3fceb1','#fff480']}
  x="label"
  y="values"
  reduceXTicks={false}
  yAxis={{
    tickFormat: d3.format('d') // <== !!!
  }}
>

检查the example sandbox。

nvd3 tickFormat 不适用于 reactjs

nvd3 tickFormat is not working with reactjs

reactjs

d3.js

nvd3.js