用于创建简单图表的 D3 数据选择

Question

我有以下数据结构在 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)

但它没有用。 我没有包含整个代码，因为(我认为(可以从控制台测试这些代码。

Answer 1

你在其他地方看到的语法更干净，因为大多数人将D3.js数据存储在数组中，而不是对象中。您可以尝试将数据更改为数组格式 - 它大大简化了代码：

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>