javascript - 在 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 选择器。

希望这对您有所帮助。