Блог

Я работаю с 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)")
  

(и повторяйте это для каждого родительского состояния, пока я не достигну желаемого состояния).

Согласно документам API, select должен получать только первый элемент, который соответствует его условию выбора, а не каждый элемент.

Кроме того, согласно документам API, селекторы d3 используют стандарт CSS3, поэтому что-то вроде этого

 d3.select("state ~ transition")
  

Следует выбирать только первый переходный брат после элемента состояния. ( ~ символ обозначает родственный элемент, который следует в какой-то момент после первого селектора, подробнее здесь ) К сожалению, нет селектора CSS3 для родственных элементов, которые предшествуют единице.

Надеюсь, это поможет.

Я решил свою проблему с помощью такого селектора:

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

Что переводится как что-то вроде:

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

Я делал это рекурсивно для каждого уровня, пока не достиг самого глубокого состояния.