Y軸のNvd3ログスケールを作る方法

Question

y軸のログスケールの使用方法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非常に遠く離れて見えるdoesntの理由：私は非常に大きな数字が含まれているこれらのシリーズをプロットしています。代わりにこれを調整し、ログスケールを使用する方法は？

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 = [{ 
 
\t key: 1, 
 
\t values: [{x:1, y:13947989924},{x:2,y:13944328607},{x:3,y:13936012870}, {x:4,y:13792849748},{x:5,y:13756681531}] 
 
    },{ 
 
    key: 2, 
 
\t \t values: [{x:1, y:10031442377},{x:2,y:10026457857},{x:3,y:10013108551}, {x:4,y:9995581772},{x:5,y:9989728780}] 
 
\t }] 
 

 
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>