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

Question

I'm working with SCXML, and my data is something like this:

<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>

I'm using D3 for the purpose of visualizing a state and its transitions, but I'm struggling to accurately select just the desired transitions.

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

What I want is to select only transitions for a state and not its substates. For example, the only transition for state1 is "quit". I imagine something like:

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

(and repeat this for each parent state until I reach my desired state).

Answer 1

According to the API docs select should only be getting the first element that matches it's selector condition not every element.

Also, according to the API docs, d3 selectors use the CSS3 standard so something like this

d3.select("state ~ transition")

Should only select the first transition sibling after a state element. (the ~ character designates a sibling that follows at some point after the first selector, more here ) Unfortunately, there is no CSS3 selector for siblings that come before one.

Hope this helps.

Answer 2

I resolved my issue with a selector like this:

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

Which translates to something like:

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

I did that recursively for each level until I reached the deepest state.