nvd3 - multiBarChart:如何记录缩放y轴

时间:2017-03-20 12:39:52

标签: d3.js nvd3.js

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

我想把它缩放到对数刻度。我使用了lineChart.yScale(d3.scale.log()),但是对于multiBarChart,调用multiBarChart.yScale(d3.scale.log()),会产生yScale is not a function

有没有其他方法来记录缩放multiBarChart的y轴?

由于

1 个答案:

答案 0 :(得分:0)

我解决了以下方法,它由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值,强制ychart.forceY)开始和结束值(将它们映射到log10 range),类似地我设置chart.yAxis.tickValues。最后,我将刻度线(chart.yAxis.tickValues)映射到它们的原始值。只需确保遵守日志功能的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函数。