使用selection.select防止不需要的数据继承

Sco*_*ron 6 d3.js

在d3中,selection.select具有从原始选择中的父节点继承数据的副作用.在父节点和子节点之间共享数据的情况下,这是合乎需要的,这样绑定到父节点的更新数据将被推送到子节点,而不需要在每个级别进行数据连接.

但是,绑定到父级的数据与绑定到子级的数据之间明确没有关系的情况呢?在这种情况下,selection.select可能是阴险的,因为只需选择一个节点就可以使该节点的数据被不相关的父数据破坏.

避免这种情况的最佳技术是什么?我可以想到几个选项,但看起来都不是很好:

  1. selection.selectAll除了需要隐式数据继承的情况外,始终在任何地方使用.然而,这并不理想,因为它使用selection.select与之不一致的用法d3.select来简单地用于选择单个节点(正是我想要做的selection.select).

  2. d3.select后代选择器一起使用,而不是selection.select隔离特定节点.使用的便利之selection.select处在于它隐含地将选择限制为起始选择的后代.使用选择器实现这一点并不是那么好.

就个人而言,我不喜欢在API的一些最常用函数的一种特定形式中具有DOM状态修改副作用.我想,我会觉得更容易理解,如果有一个明确的呼叫如selection.update(selector)要对称selection.appendselection.insert.

但是在当前的API中,我想知道是否有其他机制可以在使用时有效地破坏继承selection.select

Sco*_*ron 1

我最终在 D3 Github 上提交了一个问题:https ://github.com/mbostock/d3/issues/1443 。没有任何解决方案,但(我认为)对该问题进行了有趣的讨论。在最底部,迈克确实提供了一种可行的解决方法,为了方便起见,我将其粘贴到此处:

\n\n
\n

这不是一个很好的答案,但防止数据继承的一种方法是拥有一个没有绑定数据的中间节点。

\n\n
var intermediary = selection.append("div")\n    .datum(function() { return null; });\n
Run Code Online (Sandbox Code Playgroud)\n\n

然后,来自中间选择的任何选择都不会传播来自父选择的数据。但当然,DOM 中的中间节点有些不幸。

\n
\n