1

我正在使用 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

我想要的是只为一个状态而不是它的子状态选择转换。例如，state1 的唯一转换是“quit”。我想像：

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

（并为每个父状态重复此操作，直到达到我想要的状态）。

4

2 回答 2

1

根据API 文档，选择应该只获取与其选择器条件匹配的第一个元素，而不是每个元素。

此外，根据 API 文档，d3 选择器使用 CSS3 标准，所以像这样

d3.select("state ~ transition")

应该只选择状态元素之后的第一个转换兄弟。（该~字符指定在第一个选择器之后的某个点后面的同级，更多here）不幸的是，没有 CSS3 选择器用于在第一个选择器之前的同级。

希望这可以帮助。

于 2014-06-18T23:54:36.910 回答
1

我用这样的选择器解决了我的问题：

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

这意味着：

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

我为每个级别递归地执行此操作，直到达到最深状态。

于 2014-06-19T18:30:22.200 回答