javascript - 如何使 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 域包含特定范围(请记住，“对数标度必须具有排他性正值或排他性负值域；该域不得包含或跨越零。”( d3 documentation ) ):

chart.forceY([1000000000,50000000000]);

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

下面的代码片段使用对数刻度和 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>