nvd3 - multiBarChart：如何记录 y 轴刻度

Question

根据 multiBarChart doc 应该可以在 multiBarChart 上设置 yScale，因为 yScale 应该是继承方法。

我想将其缩放为对数刻度。我使用 lineChart.yScale(d3.scale.log()) 进行了此操作，但对于 multiBarChart，调用 multiBarChart.yScale(d3.scale.log()) 会导致 yScale is not a function.

是否有任何其他方法来记录 multiBarChart 的 y 轴刻度？

谢谢

Answer 1

我通过以下方法解决了这个问题，它由 shouldLogScale var:

控制

nv.addGraph(() => {
  this.chart = nv.models.multiBarChart()
    ...
    .y(d => {
      const y = parseFloat(d.y);
      return this.shouldLogScale ? Math.log10(y <= 0 ? 1 : y) : y;
    });

  if(this.shouldLogScale) {
    this.logScale();
  } else {
    this.chart.yAxis.tickFormat(d3.format(`,.${this.precision}f`));
  }

  ...
});

初始化图表时：我修改 y 值，强制 y (chart.forceY) 开始和结束值（将它们映射到日志的 log10 range), analogically I set chart.yAxis.tickValues. Lastly I map ticks (chart.yAxis.tickValues) to their original values. Just make sure to comply domain功能。

logScale方法：

private logScale() {
  this.chart.forceY([1, 180]
    .map(v => Math.log10(v)));
  this.chart.yAxis.tickValues([1, 3, 5, 10, 20, 50, 100, 180]
    .map(v => Math.log10(v)));
  this.chart.yAxis.tickFormat(d => Math.pow(10, d).toFixed(this.precision));
}

也许我可以使用 y 域和范围值的映射来避免在 logScale 方法中使用 log 和 pow 函数。

nvd3 - multiBarChart：如何记录 y 轴刻度

nvd3 - multiBarChart: how to log scale y axis

d3.js

nvd3.js