时间戳

首页 > 解决方案 > D3 多折线图 - 多个数组，解析时间戳

javascript - D3 多折线图 - 多个数组，解析时间戳

问题描述

所以我使用d3，v4。尝试按日期 (x) 和值 (y) 分别绘制多条线。问题是我在第一行做了一次后无法解析日期。我可以做些什么不同的事情（特别是对于第一个功能）以使其对两者都有效？

这是整个项目的代码笔（我已经包含了多个数据数组，但我只是在绘制前两个数据的过程中。对不起，混乱。下面的行可以从第 314 行开始） 重要部分：

function type(data) {
   data[0].forEach(function(d) {
   d.inspected_at =  parseTime(d.inspected_at);
   console.log(d)
   return d;
   })
};

// define the line
var line1 = d3.line()
    .x(function(d) { return x(d.inspected_at); })
    .y(function(d) { return y(d.flow_data);});
var line2 = d3.line()
    .x(function(d) { return x(d.inspected_at); })
    .y(function(d) { return y(d.flow_data);});

// Add the line path(s)
//line CB-01
svg.append('g')
  .attr('clip-path', 'url(#clipper)') 
  .selectAll('path#line').data([data[0]])
  .enter().append("path") 
  .attr("class", "line")
  .attr("id", "downstreamLine")
  .attr("d", line1)
  .attr("stroke", "blue");  
  //line CB-02
svg.append('g')
  .attr('clip-path', 'url(#clipper)') 
  .selectAll('path#line').data([data[1]])
  .enter().append("path") 
  .attr("class", "line")
  // .attr("id", "downstreamLine")
  .attr("d", line2)
  .attr("stroke", "green");

这是我的数据的样子：

var data = [{"id":"CB-01","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"4"},
{"id":"CB-01","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"5"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"4"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"7"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"2"},
{"id":"CB-01","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"3"},
{"id":"CB-01","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"9"}],


[{"id":"CB-02","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"3"},
{"id":"CB-02","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"2"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"3"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"5"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"6"},
{"id":"CB-02","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"8"},
{"id":"CB-02","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"7"}]

第一个数组是一行，第二个数组是下一个。

提前致谢！让我知道我是否可以提供更多信息。

标签： javascriptd3.jssvgdatetime-parsing

解决方案

这应该适用于任何数量的线，迭代每个线阵列并对该线阵列中的每个点执行相同的过程：

function type(data) {
  data.forEach(arr => arr.forEach(d => d.inspected_at = parseTime(d.inspected_at)))
};

推荐阅读