6

X 軸のカテゴリを維持しながら、データセットから折れ線グラフを作成しようとしています。観測者にとっては、観測の X 座標間に等距離の間隔がある折れ線グラフのように見えます。

( 1 ------ 5 ------ 30 ------ 600)

今のところ、次のようなものを取得しています：

(1-5-----30-------600)

これは私のデータセットです:

var ds1 =  [
  {
    key: 'VAR-1',
    color: '#FF7F0E',
    values: [
   { "x" : "600", "y" : 0.07706} 
 , { "x" : "30", "y" : 0.00553} 
 , { "x" : "5", "y" : 0.00919} 
 , { "x" : "1", "y" : 0.00969} 
    ]
  }
];

順序軸を作成して、折れ線グラフ オブジェクトに設定しようとしました。

var chart =nv.models.lineChart()
             .margin({top: 10, bottom: 40, left: 60, right: 30});   
var x = d3.scale.ordinal().domain(["1","5", "30", "600"]);
chart.xAxis.scale(x);

chart.yAxis
    .tickFormat(d3.format(',.3f'));

chart.forceY([0]);

d3.select('#exampleOne')
    .datum(ds1)
    .transition().duration(500)
    .call(chart);

ただし、プロットでは何も変わっていないようです。

NVD3 折れ線グラフの実装で序数軸を有効にできますか、それともこの折れ線グラフは数値データのみを対象として書かれているのでしょうか?

PS: 私は d3.js を初めて使用するので、ここで何か間違っている可能性があります。

4

2 に答える 2

2

スケールに rangeBounds([0, chartWidth]) を設定してみてください。すなわち

d3.scale.ordinal().domain(["1","5", "30", "600"]).rangeBounds([0, width]);

訂正：スケールを変更する必要があると思いましたが、実際には、プロットされた線に等距離でプロットされた値が必要です。これを行うには、lineGraph に送信するデータセットを次のように変更することができます。

var ds1 =  [ {
key: 'VAR-1',
color: '#FF7F0E',
values: [
{ "x" : "4", "y" : 0.07706} 
, { "x" : "3", "y" : 0.00553} 
, { "x" : "2", "y" : 0.00919} 
, { "x" : "1", "y" : 0.00969} 
]}
];

そうすれば、x 軸に表示される値は序数 (つまり、1、5、30、600) になりますが、線にプロットされる値は線形スケールになります。

于 2013-01-14T17:02:24.183 に答える