Question

我在使用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);});

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

Answer 1

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

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);

Answer 2

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

D3线图，任意多行（和特定数据格式）

2 个答案: