何时在d3中使用selection.data(...).something()与selection.merge().something()? [英] When to use selection.data(...).something() vs. selection.merge().something() in d3?

问题描述

当新数据加入时，我对d3中UPDATE和MERGE之间的区别感到困惑 a>选择.

输入很容易；它适用于新元素.

ENTER is easy; it applies to new elements.

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

EXIT is easy; it applies to elements that were in the old data.

我怎么知道何时使用UPDATE与MERGE?

How do I know when to use UPDATE vs. 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

?

推荐答案

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

TLDR: update refers conceptually to a group of elements; .merge() is a method that can be used to combine the enter and update selections.

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

Update is a concept referring to the DOM elements that were in the DOM before the data change and remain there after the data change (i.e., the middle section of the Venn diagram in the link). There is no .update() method, however -- you get your update selection with .selectAll().

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

This can lead to some redundancy where you are applying the same attributes/styles to elements that just entered (the .enter() selection) and were already there. The .merge() method introduced in D3v4 provides a solution where you get a selection of both your enter and update elements.

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

It is still possible to carry out the update process without using .merge(), and there are some cases where it might still make sense to write separate statements for the enter and update selections.

这篇关于何时在d3中使用selection.data(...).something()与selection.merge().something()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！