javascript - 使用带有 d3.js 和 nvd3.js 的序号 x 轴的折线图

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

尝试为刻度设置 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)，但为直线绘制的值将按线性比例绘制。