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

Question

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

但是对于绑定(bind)到父级的数据和绑定(bind)到子级的数据之间没有明确关系的情况呢？在这种情况下，selection.select可能是阴险的，因为只需选择一个节点，就会导致该节点的数据被不相关的父数据破坏。

避免这种情况的最佳技术是什么？我可以想到几个选项，但似乎都不太好:

始终使用 selection.selectAll除了需要隐式数据继承的情况外。然而，这并不理想，因为它使用了 selection.select与 d3.select 不一致它仅用于选择单个节点(正是我想用 selection.select 做的)。

使用d3.select与 descendents selector而不是 selection.select隔离特定节点。使用 selection.select 的方便之处是它隐式地将选择限制为起始选择的后代。使用选择器实现这一点并不是那么好。

就个人而言，我不喜欢在 API 中一些最常用的函数的一种特定形式中产生 DOM 状态修改副作用。我想如果有明确的调用，例如 selection.update(selector)，我会发现更容易理解。与 selection.append 对称和 selection.insert .

但是在当前的 API 中，我想知道在使用 selection.select 时是否还有其他机制可以用来有效地中断继承。 ?

Answer 1

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

Not a great answer, but one way you can prevent data inheritance is to have an intermediate node without bound data.

var intermediary = selection.append("div")
    .datum(function() { return null; });

Then, any select from the intermediary wouldn’t propagate data from the parent selection. But of course, the intermediate node in the DOM is somewhat unfortunate.