D3 Multi Line Chart- 多数组,解析时间戳
D3 Multi Line Chart- Multiple Arrays, parsing Timestamps
所以我使用的是 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"}]
第一个数组是一行,第二个数组是下一行。
提前致谢!让我知道是否可以提供更多信息。
这应该适用于任何数量的线,迭代每个线阵列并对该线阵列中的每个点执行相同的过程:
function type(data) {
data.forEach(arr => arr.forEach(d => d.inspected_at = parseTime(d.inspected_at)))
};
所以我使用的是 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"}]
第一个数组是一行,第二个数组是下一行。
提前致谢!让我知道是否可以提供更多信息。
这应该适用于任何数量的线,迭代每个线阵列并对该线阵列中的每个点执行相同的过程:
function type(data) {
data.forEach(arr => arr.forEach(d => d.inspected_at = parseTime(d.inspected_at)))
};