Javascript 如何在react d3树中自定义方向

我是react-d3-tree库和d3的新手，我有一个这样的数据树：

但我想生成这样的树：

可能吗？因为我不知道如何创建这样的格式

这是我生成树的代码：

organization.js

import React from "react";
import Tree from 'react-d3-tree';

const data = [
{
name : "root",
children : [
  {
    name: "child of a",
    children: [
      {
        name : "child of a.1",
      },
      {
        name : "child of a.2",
      },
      {
        name : "child of a.3",
      },
      {
        name : "child of a.4",
      },
      {
        name : "child of a.5",
      },
      {
        name : "child of a.6",
      },
    ]
  },
  {
    name: "child of b",
    children: [
      {
        name : "child of b.1",
      },
      {
        name : "child of b.2",
      },
      {
        name : "child of b.3",
      },
      {
        name : "child of b.4",
      },
      {
        name : "child of b.5",
      },
      {
        name : "child of b.6",
      },
    ]
  },
  {
    name: "child of c",
    children: [
      {
        name : "child of c.1",
      },
      {
        name : "child of c.2",
      },
      {
        name : "child of c.3",
      },
      {
        name : "child of c.4",
      },
      {
        name : "child of c.5",
      },
      {
        name : "child of c.6",
      },
    ]
  }
]
}
]

const svgSquare = {
  shape: 'rect',
  shapeProps: {
    width: 0,
    height: 0,
  }
}

class Organization extends React.Component {
  render() {
   return (
     <div style={{width: '100%', height: '100vh'}} ref={tc => (this.treeContainer = tc)}>
      <Tree data={data}
        orientation={"vertical"}
        allowForeignObjects
        nodeLabelComponent={{
          render: <CardSO />
        }}
        nodeSvgShape={svgSquare}
        pathFunc="step"
        translate={this.state.translate}
        initialDepth={1}
        nodeSize={{
          x: 240,
          y: 200
        }}
        separation={{
          siblings: 1,
          nonSiblings: 1
        }}
      />
  </div>
)
  }
}

---

感谢您之前的回答：）

您想要的不是树的默认布局。请在您的问题中添加一个工作代码段，以便更轻松地修改代码。我编辑了我的代码段，希望它能帮助您解决问题，谢谢：）您想要的不是树的默认布局。请在您的问题中添加一个工作代码段，以便更轻松地修改代码。我编辑了我的代码段，希望它能帮助您解决问题，谢谢：）

import React from 'react'
import './style.scss'

class CardSO extends React.PureComponent {
  render() {
    const {nodeData} = this.props
    return (
      <div className="card-so-wrapper">
        {nodeData.name}
      </div>
    )}
}
export default CardSO

.card-so-wrapper{
  width: 220px;
  height: 70px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.78);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  position: absolute;
  left: -110px;
  display: flex;
}