如何让 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) );

您还可以通过使用（记住 "a log scale must have either an exclusively-positive or exclusively-negative domain; the domain must not include or cross zero." (d3 documentation)):

强制 y 域包含特定范围

chart.forceY([1000000000,50000000000]);

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

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

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

How to make Nvd3 use log scale on y-axis

javascript

d3.js

nvd3.js

python-nvd3