Question

我正在尝试使用D3.js创建折线图，但我很难过。我跟着this tutorial，但我看不出如何将数据输入图表。

以下是我的数据：

[
    { name : "SomeKey", timestamp : "2013-05-07T12:00:00.052Z", value : "1" }
    { name : "SomeKey", timestamp : "2013-05-07T12:10:00.052Z", value : "4" }
    { name : "SomeKey", timestamp : "2013-05-07T12:40:00.052Z", value : "2" }
    { name : "SomeKey", timestamp : "2013-05-07T12:41:00.052Z", value : "2" }
    { name : "SomeKey", timestamp : "2013-05-07T12:44:00.052Z", value : "2" }
    ... etc. there can be loads of objects in this array
]

如上所述，数组中可以有任意数量的对象，name键始终保持数组的相同值，我需要的是x轴上的时间戳，值是绘制的值图表，但我无法弄明白。

我在SO上看了几个可能类似于这个问题的其他问题，但我的不同之处在于每个对象只有一个值。

Answer 1

您需要进行一些更改，以指定您希望数据基于的对象中的属性，在您的情况下为“值”。

首先获得最大Y.

maxY = d3.max(data, function (d) {
    return d.value;
});

您想要从教程中修改此行，并使用maxY替换d3.max（data）。

y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin])

然后您需要修改此代码以指定您的值

var line = d3.svg.line()
   .x(function(d,i) { return x(i); })
   .y(function(d) { return -1 * y(d.value); })

使用对象数组绘制D3折线图

1 个答案: