带条形图的NVD3对数Y轴

Question

我有一个用NVD3制作的NVD3 ，它显示的数据在最小值和最大值之间有巨大的差距。

这使得图表不是很好/没有用完。

范例：

Y值在4,000到60,000之间，然后一些值在3m附近。

我想让Y轴值以对数方式增加，从而显示出类似以下内容（请参见y轴） ：

我试图更改yAxis标度，yAxis域，但没有找到任何可行的解决方案

（仅供参考：我通过angularJs指令使用nvd3）

Answer 1

这对你有用

chart.y(function(d) { return d.value>0?Math.log10(d.value+1):0 })
chart.yAxis.tickFormat(function(d){return (Math.pow(10,d)-1).toFixed(2)})

仅适用于正值

Answer 2

问题的根源是nvd3中的条形图从0开始，并且log（0）== Infinity。

不幸的是，nvd3中有一条特定的线在计算图表的条形高度时使用y（0）。 当y（0）计算为Infinity时，事物中断。 此外，nvd3当前正在进行重构，因此，它们不会对旧代码库进行任何拉取请求。

这对我有用。 这不是一般的解决方法，但是我什至无法在线找到此级别的信息，因此我将其发布在这里。

在这种情况下，我使用的是折线图和条形图，这可能不适用于其他条形图，但希望它能使您了解需要做什么。

首先，请确保您的图表设置正确。

  yourChart.bars.yScale(d3.scale.log());
  yourChart.bars.forceY([1]); //Make sure y axis starts at 1 not 0
  yourChart.y1Axis.tickValues([1, 10, 100]); //Continue pattern for more ticks

现在在1600行附近的nvd3.js中（在nvd3 1.8行号是5605中），您应该看到：

      bars.transition()
          .attr('y', function(d,i) {
            var rval = getY(d,i) < 0 ?
                    y(0) :
                    y(0) - y(getY(d,i)) < 1 ?
                      y(0) - 1 :
                      y(getY(d,i));
            return nv.utils.NaNtoZero(rval);
          })
          .attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(1)),1)) });

在最后一条语句中：

.attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(0)),1)) });

您需要将y（0）替换为y（1），这将为您提供：

.attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(1)),1)) });

如果这不起作用，请寻找其他情况，其中nvd3设置bar.transition（）并计算高度。 您可能需要解决将0传递给y（）的其他情况。

希望这可以帮助。