[SOLVED] Selecting DOM elements but not their children in D3

Selecting DOM elements but not their children in D3

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

Solution

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.