d3将布局从垂直更改为水平

Question

我有以下使用d3库呈现的树形图。 （我对这些东西非常陌生）是否可以让我轻松地将图的布局更改为从上至下（如图所示）从左至右进行排列？

创建该图形所用的代码在这里：

  _createNode(state, index) {
    this.graph.setNode(state.id, {
      label: state.label,
      class: "node-default",
      id: `state_${state.id}`
    });
  }

  _createEdge(transition) {
    this.graph.setEdge(transition.source_state, transition.destination_state, {
      id: `transition_${transition.id}`,
      label: `<-------`,
      curve: d3.curveBasis
    });
  }

  _renderSketch() {
    if (this.props.workflow.states.length > 0 && this.refs.flowchart || this.refs.flowchart && this.props.workflow.transitions.length > 0) {
      this._destroySketchComponents();

      var that = this;
      this.props.workflow.states.forEach((state, index) => {
        that._createNode(state, index);
      });

      this.props.workflow.transitions.forEach(transition => {
        that._createEdge(transition);
      });


      var render = new dagreD3.render();

      var inner = d3.select(this.refs.flowchart.lastElementChild)
      render(inner, this.graph);
      this._reCenterSketch();
      this._setNodeOnclicks();
      this._setEdgeLabelDefaultClass();
      this._setEdgeOnclicks();
      this._setClasses();
    }
  }

这是我希望实现的目标：