javascript - d3 中何时使用 Selection.data(...).something() 与 Selection.merge().something() ？

Question

当 new data is joined 时，我对 d3 中 UPDATE 和 MERGE 之间的区别感到困惑到一个选择。

ENTER 很容易；它适用于新元素。

退出很容易；它适用于旧数据中的元素。

我如何知道何时使用 UPDATE 与 MERGE？

var thingies = d3.selectAll('.mythingy')
thingies.data(newData).call(handle_update)  // UPDATE
  .enter().call(handle_enter)               // ENTER
  .merge().call(handle_merge)               // MERGE
  .exit().call(handle_exit)                 // EXIT

？

Answer 1

TLDR:更新在概念上是指一组元素； .merge() 是一种可用于组合输入和更新选择的方法。

更新是一个概念，指的是数据更改之前位于 DOM 中并在数据更改后保留在那里的 DOM 元素(即链接中维恩图的中间部分)。但是，没有 .update() 方法 - 您可以使用 .selectAll() 获取更新选择。

这可能会导致一些冗余，即您将相同的属性/样式应用于刚刚输入的元素(.enter() 选择)并且已经存在。 D3v4 中引入的 .merge() 方法提供了一种解决方案，您可以在其中选择输入和更新元素。

仍然可以在不使用.merge()的情况下执行更新过程，并且在某些情况下，为输入和更新选择编写单独的语句可能仍然有意义。