Question

好的SO人员，

我是javascript，JSON和D3.js的新手，我正在尝试构建一个多行时间序列图表。我的数据来自我的服务器，如下所示：

{
"t":    ["2014-08-16T16:15:00", "2014-08-16T16:20:00", "2014-08-16T16:25:00", ...], 
"todd": [0,0,1,2,3,2,1,0,0, ...],
"pete": [3,2,1,0,4,4,0,0,0, ...]
}

这是我存储在一个名为'dataset'的数组中。随后解析日期时间。 't'，'todd'和'pete'数组长度相等。

最终我希望时间（t）值用于x轴，其他两个值作为y值随时间变化。解析数据有效，但是我无法正确显示它。到目前为止有效的是：

答：一个接一个地显示我的值，没有时间参考，所以我得到两条漂亮的彩色线，但x轴没有信息，因为它只显示0到N.

OR

B：将x轴显示为基于“t”值的时间轴（这告诉我解析的工作原理应该如此）。但是，我无法展示我的两条线。

在变体A中，我只是将索引作为x值返回，如下所示：

var line = d3.svg.
    .x(function(d,i) { 
        return i;
    })
...

现在我正试图从“t”-array返回日期时间：

var line = d3.svg.
    .x(function(d,i) { 
        return dataset.t[i];
    })
...

但是，没有显示任何内容。我在控制台中完全没有错误。我试过控制台记录'dataset.t [i]'的值，但没有显示。好像代码甚至没有运行，所以这里是调用上面代码的for循环：

for (var key in dataset) {
  if (dataset.hasOwnProperty(key) && key!="t")  {
    data=dataset[key];
    svg.append("svg:path").attr("d", line(data))
        .style("stroke", color(key))
        .style("stroke-width", 2);

    //BELOW IS IRRELEVANT TO MY QUESTION, JUST FOR COMPLETENESS...
    svg.append("rect")
          .attr("x", w - 65)
          .attr("y", n*25)
          .attr("width", 10)
          .attr("height", 10)
          .style("fill", color(key)); 

    svg.append("text")
          .attr("x", w - 50)
          .attr("y", n * 25 + 10)
          .attr("height",30)
          .attr("width",100)
          .style("fill", color(key))
          .text(key);
    n+=1; // counter up
    }
};

我可以告诉它正在运行，因为'rect'和'text'元素被添加到图表中。

完整代码在此处：http://pastebin.com/tbS7rD7p

到现在为止我已经看不到了，所以我真的很期待你的想法。非常感谢提前！

干杯，本

Answer 1

在代码版本中，感谢您的输入。我正在以您建议的方式优化代码。但是，当您通过.x（）和.y（）方法为这些分配数据时，您似乎不需要带行的.data（）方法（如果我理解正确的话）。

无论如何，最终解决方案是改变：

.x(function(d,i) {return dataset.t[i];})

到

.x(function(d,i) {return x(dataset.t[i]);})

几乎在每个教程中都提到过，但我明智地选择忽略它，因为它对我来说似乎毫无意义。如果有人可以对此发表评论并启发我，我将不胜感激。

干杯！

线条未显示在带有时间轴的d3.js多线图中

1 个答案: