Selecting DOM elements but not their children in 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).

score 1 · Answer 1 · answered Jun 18 '14 at 23:54

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.

Oops, I corrected my use of select to selectAll. Thanks for the tip, I think I may be able to use attribute selection with this. — Malcolm Crum, Jun 19 '14 at 04:00

score 1 · Accepted Answer · answered Jun 19 '14 at 18:30

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.

Selecting DOM elements but not their children in D3

2 Answers2