使用序数x轴与d3.js和nvd3.js的折线图

Question

我试图从数据集中制作折线图,同时保持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的新手,所以我可能在这里做错了.

Answer 1

尝试设置范围范围（[0，chartWidth]）的比例。IE

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），但为该线绘制的值将采用线性刻度。