D3使用'select'和'selectAll'

Question

我无法绕过D3的选择声明.

创建图形时,通常会执行以下操作:

svg.selectAll("rect")
  .data(my_graph_data)
  .enter()
  .append("rect")
  ..//etc.

我不明白的是selectAll.此时,没有元素可供选择!这些元素仅在以后根据数据附加.

或者我应该从右到左阅读这些D3语句？在那种情况下,为什么我需要选择元素？

Answer 1

由于后续调用,您需要选择(不存在的)元素.data().此调用指示D3将参数中给出的数据与您选择的元素进行匹配.如果,在您的情况下,选择为空,D3将为所有这些选项创建占位符元素 - 输入选择.然后,您可以像使用此选项来添加新元素.

.selectAll(...).data(...)无论您在SVG中拥有什么,这种模式都是一致的.只要您处理所有三个(输入,更新,退出)选择,它将始终执行预期的操作.在初始选择中,可能没有元素,所有数据的元素或其间的某个位置.

从技术上说,你不要有开始添加新元素时,使用这种模式,它只是使代码更一致.特别是,您可以在一个函数中使用此模式,该函数将使用新数据更新SVG,无论其状态如何(即最初以及获取和显示新数据和更改数据时的工作方式相同).