D3中选择DOM元素而不是子元素

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

我想要的只是选择状态的转换而不是其子状态。例如，state1的唯一转换是“退出”。我想象的是：

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

（并为每个父状态重复此操作，直到达到我想要的状态）。

Answer 1

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

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

d3.select("state ~ transition")

只应在状态元素之后选择第一个转换同级。 （~字符指定在第一个选择器之后的某个位置跟随的兄弟，更多here）不幸的是，兄弟姐妹之前没有CSS3选择器。

希望这有帮助。

Answer 2

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

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

这意味着：

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

我为每个级别递归递归，直到我达到最深的状态。