如何让 Nvd3 在 y 轴上使用对数刻度

Question

如何在nvd3 lineChart y 轴上使用对数刻度？我正在绘制这些包含非常大数字的系列：

ydata1 = [13947989924.43, 13944328607.2, 13936012870.52, 13792849748.97, 13756681531.69]
ydata2 = [10031442377.14, 10026457857.22, 10013108551.11, 9995581772.15, 9989728780.19]

而且因为 y 轴不是从 0 开始，ydata1 和 ydata2 看起来相距甚远。如何调整它并改用对数刻度？

Answer 1

我的 NVD3 有点生锈了，但我想我可以帮忙。

您的系列在对数刻度上看起来也相距甚远（正如您所建议的那样），这正是 NVD3 空间的方式，因此更改轴的域会有所帮助。您可以按如下方式更改 y 轴的刻度类型和域：

一个日志轴是这样创建的：

chart.yScale( d3.scale.log() );

你可以这样设置基础：

chart.yScale( d3.scale.log().base(2) );

您还可以通过使用强制 y 域包含特定范围（请记住，“对数刻度必须具有完全正域或完全负域；域不得包含或交叉零。”（@987654321 @))：

chart.forceY([1000000000,50000000000]);

这可以帮助您远离顶部和底部边缘使数据居中。我不知道有任何 NVD3 方法可以让您自动执行此操作，但您可以根据数据集中的最大值/最小值动态设置这些值。

下面的 sn-p 使用对数刻度和 y 轴的强制域：

var chart;
var data;
  
nv.addGraph(function() {
  chart = nv.models.lineChart()
    .x(function (d) { return d.x; })
    .options({showYAxis: true})
    .forceY([1000000000,50000000000]);

data = [{
	  key: 1,
	values: [{x:1, y:13947989924},{x:2,y:13944328607},{x:3,y:13936012870}, {x:4,y:13792849748},{x:5,y:13756681531}]
  },{
    key: 2,
		values: [{x:1, y:10031442377},{x:2,y:10026457857},{x:3,y:10013108551}, {x:4,y:9995581772},{x:5,y:9989728780}]
	}]   

chart.yScale( d3.scale.log() );


d3.select('#chart').append('svg')
  .datum(data)
  .call(chart);

nv.utils.windowResize(chart.update);
  return chart;
});

#chart svg {
  width: 500px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet" type="text/css">

<div id="chart"></div>