5

我在使用 D3 时遇到了一些问题，而且我已经束手无策了。本质上，我有一个带有任意多行的时间序列图，并且为了方便起见，不能事先修改源数据（但它可以在客户端进行操作）。

数据是这样格式化的（带有任意多个标签）：

object = [
{
  "_id": "2012-08-01T05:00:00",
  "value": {
    "label1": 1.1208746110529344,
    "label2": 0.00977592175310571
  }
},
{
  "_id": "2012-08-15T05:00:00",
  "value": {
    "label1": 0.7218920737863477,
    "label2": 0.6250727456677252
  },
  ....

我试过类似的东西：

var vis = d3.select.(element)
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g");

var line = d3.svg.line()
    .x(function(data) {return x(new Date(data._id));})
    .y(function(data) {return y(data.value);});


vis.append("svg:path")
    .attr("d", line(object))
    .attr("stroke", "black");

这似乎无法通过 y 访问器访问正确的值，因为我收到“错误：解析问题”和很多“NaNL3.384615384615385,NaNL6.76923076923077,NaNL10.153846153846155”。但是，如果我通过以下方式对标签值进行硬编码：

.y(function(data) {return y(data.value.label1);});

它工作得很好，但只适用于一行。有人可以提供帮助吗？

4

2 回答 2

7

我首先将数据转换为相同格式的并行数组：

var series = ["label1", "label2"].map(function(name) {
  return data.map(function(d) {
    return {date: new Date(d._id), value: d.value[name]};
  });
});

（您可以使用d3.keys自动计算系列名称，而不是像上面那样对它们进行硬编码。）现在series是一个数组数组。单个系列，例如 label1，将如下所示：

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344},
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477},
…

由于它们具有相同的格式，因此您可以对所有系列使用相同的行生成器：

var line = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y(d.value); });

同样，嵌套数组也很适合数据连接以创建所需的路径元素：

svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line);
于 2012-08-23T03:29:33.783 回答
1

尝试合并 parseFloat 以确保您正在转换为浮点数而不是隐式转换为整数。如果这仍然不起作用，请尝试获取字符串的子字符串（砍掉一些精度），直到它起作用。

于 2012-08-22T23:14:33.360 回答