[英]d3 data selection for creating a simple chart
我具有以下数据结构,用于在D3.js中创建图表:
var tasklist = {
"tasks": {
"task1": {
"TASKSTARTTIME": "2018-09-07T07:36:19.990Z",
},
"task2": {
"TASKSTARTTIME": "2018-09-07T07:36:20.010Z",
},
"task3": {
"TASKSTARTTIME": "2018-09-07T07:36:20.100Z",
}
}
}
并成功设置了图表的x和y域,如下所示:
x.domain(d3.extent(Object.entries(tasklist.tasks).map(([d, v]) => (v["TASKSTARTTIME"]))));
y.domain(Object.entries(tasklist.tasks).map(([d, v]) => (d)));
但是我认为这一定是错误的,因为当我查看其他示例时,语法看起来更加简洁。
所以,我的第一个问题是:是否有更正确的D3方法来达到相同的结果?
问题2:如何选择要绘制的单个数据点? 我尝试对x轴进行以下跟踪:
([d,v]) => (x(v["TASKSTARTTIME"]))
和
d => y(d)
但这没用。 我没有包括整个代码,因为(我认为)可以从控制台进行测试。
您在其他地方看到的语法更加简洁,因为大多数人将D3.js数据存储在数组中,而不是对象中。 您可以尝试将数据更改为Array格式-大大简化了代码:
var tasks = [ {name: 'task1', 'time': '2018-09-07T07:36:19.990Z'}, {name: 'task2', 'time': '2018-09-07T07:36:20.010Z'} ] var xDomain = d3.extent(tasks, d => d.time) var yDomain = d3.extent(tasks, d => d.name) console.log({x: xDomain, y: yDomain});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.