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数据存储在数组中，而不是对象中。您可以尝试将数据更改为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>

d3数据选择，用于创建简单图表

1 个答案: