選擇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")

我遞歸地執行每個級別的操作，直到達到最深的狀態。