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])。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），但为线绘制的值将在线性刻度上。

于 2013-01-14T17:02:24.183 回答
0

我认为您不能为 nvd3 中的任何折线图或散点图设置序数域。这些行在 models.scatter 定义中：

  if ( isNaN(x.domain()[0])) {
      x.domain([-1,1]);
  }

  if ( isNaN(y.domain()[0])) {
      y.domain([-1,1]);
  }

显然，这将不允许此类图表中 x 或 y 比例的任何序数比例（它是折线图和大多数其他非条形图的基础）。

于 2013-08-29T16:38:27.133 回答