0

私は d3.js で作業していますが、問題があります。チュートリアルと例を使用してグラフを作成しています。グラフの Y 軸に (120000000000) のような動的な非常に大きな値があるという問題があります。限られたスペースでこれらの値を表示できません。12X10^10 のようにこれらの大きな値を 10 の累乗で表示する方法や、d3 を使用する他の方法はありますか?

今、私はこのようなスケールを使用しています

パワースケール

y = d3.scale.pow().exponent(0.3).domain([0, maxvalue ])
                                .range([Height, 0]).nice();

対数スケール

y = d3.scale.log().clamp(true).domain([0.1, maxvalue])
                               .range([height, 0]).nice();

リニアスケール

y = d3.scale.linear().domain([0, maxvalue])
                     .range([height, 0]).nice();

これはどのスケールでも共通です

yAxis = d3.svg.axis().scale(y).ticks(6, tickFormatForLogScale)
                                   .orient('left');

値を適切に表示するためのヘルプは役に立ちます。

ありがとう

4

2 に答える 2

0

http://d3-example.herokuapp.com/examples/area/area.htmlの例を変更した後、対数 y 線形 x グラフのように見えるものを作成できました。

以下を変更しました。

   var data = d3.range(500).map(function(i) {
     return {x: i , y: i*i};
     //return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4};
   });

  var y = d3.scale.log().clamp(true)
       .domain([1, 220000])
       .range([height, 0]);

  var x = d3.scale.linear()
       .domain([0, 500])
       .range([0, 900]);

直感的ではないように思えますが、height変数と 900 リテラルは、レンダリングされたグラフの大きさを定義します。これは、データの定義方法 (パラメーター化された関数) が原因である可能性があります。これを機能させるには、map(function(i){...}) のドメインを微調整する必要があります。i 変数には値 [ domain[0], ...., domain 1 ] が与えられ、x と y の両方が map 関数の対応する数式で計算されます。

コードの残りの部分を示していないため、これがどの程度役立つかはわかりません。それでも混乱する場合は、http://www.geogebra.org/でいくつかの対数スケールのグラフをプロットして、それらがどのように機能するかの一般的な感覚をつかんでみてください。

ここに私が得るものがあります： 対数 y スケール

于 2012-10-09T11:20:52.087 に答える
0

Javascript にはメソッド toPrecision があります。

 var anumber=123.45
 anumber.toPrecision(2) //returns 1.2e+2
于 2012-10-09T11:11:24.257 に答える