javascript - 用于创建简单图表的 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>