在D3中选择DOM元素，但不选择其子元素

Selecting DOM elements but not their children in D3

本文关键字：选择 元素 D3 DOM      更新时间：2023-09-26

我正在使用SCXML，我的数据是这样的:

<state id="umbrella_state">
  <state id="state1"></state>
  <state id="state2>
    <transition event="cancel"></transition>
    <transition event="next"></transition>
  </state>
  <transition event="quit"></transition>
</state>

我正在使用D3来可视化状态及其转换，但我很难准确地选择所需的转换。

d3.selectAll("#transitions") // selects everything, which I don't want

我想要的是只选择一个状态的过渡，而不是它的子状态。例如，state1的唯一转换是"quit"。我想象如下:

d3.selectAll("[id=umbrella_state]").selectAll("transition :not(transition > transition)")

(并对每个父状态重复此操作，直到达到所需的状态)。

根据API文档，select应该只获取第一个匹配它的选择器条件的元素，而不是每个元素。

另外，根据API文档，d3选择器使用CSS3标准，所以像这样的东西

d3.select("state ~ transition")

应该只选择状态元素之后的第一个转换兄弟。(~字符表示在第一个选择器之后的某个点上的兄弟，这里更多)不幸的是，没有CSS3选择器用于在1之前的兄弟。

我用这样的选择器解决了我的问题:

d3.selectAll("[id='" + state.attr("id") + "'] > transition")

翻译过来就是:

d3.selectAll("[id='umbrella_state'] > transition")

我对每一层都递归地这样做，直到到达最深的状态。

相关文章：