如何使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域包含特定范围（记住＆＃34;对数比例必须具有排他性或唯一负数域;域不得包含或交叉为零。＆ ＃34;（d3 documentation））：

chart.forceY([1000000000,50000000000]);

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

以下代码段使用日志比例和y轴的强制域：

＆＃13;

＆＃13;

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;
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;