选择DOM元素，但不选择D3中的子元素

Question

我正在使用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

我想要的只是选择一个状态的过渡，而不是其子状态。 例如，状态1的唯一转换是“退出”。 我想像这样：

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

（并针对每个父状态重复此操作，直到我达到所需的状态）。

Answer 1

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

另外，根据API文档，d3选择器使用CSS3标准，因此类似

d3.select("state ~ transition")

应该只选择状态元素之后的第一个过渡同级。 （ ~字符表示在第一个选择器之后的某个位置出现的兄弟姐妹，更多信息在此处 ）不幸的是，没有CSS3选择器用于在兄弟姐妹之前的兄弟姐妹。

希望这可以帮助。

Answer 2

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

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

相当于：

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

我递归地执行每个级别的操作，直到达到最深的状态。