JS怎样生成组织结构图 4种布局算法可视化树形数据结构

[
  {
    "id": "1",
    "name": "CEO",
    "children": [
      {
        "id": "2",
        "name": "CTO",
        "children": [
          {
            "id": "3",
            "name": "研发经理"
          }
        ]
      },
      {
        "id": "4",
        "name": "CFO"
      }
    ]
  }
]

function generateOrgChart(data, parentElement) {
  const ul = document.createElement('ul');
  parentElement.appendChild(ul);

  data.forEach(node => {
    const li = document.createElement('li');
    li.textContent = node.name;
    ul.appendChild(li);

    if (node.children && node.children.length > 0) {
      generateOrgChart(node.children, li);
    }
  });
}

const orgData = // 上面的JSON数据
const container = document.getElementById('orgChartContainer'); // HTML中需要有一个id为orgChartContainer的元素
generateOrgChart(orgData, container);

const treeData = // 上面的JSON数据

const treeLayout = d3.tree().size([width, height]); // width和height是SVG的宽高

const root = d3.hierarchy(treeData[0], d => d.children);

treeLayout(root);

const svg = d3.select("#orgChartContainer").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll(".node")
  .data(root.descendants())
  .enter().append("g")
    .attr("class", "node")
    .attr("transform", d => "translate(" + d.y + "," + d.x + ")");

svg.selectAll(".node")
  .append("circle")
    .attr("r", 10)
    .style("fill", "#69b3a2");

svg.selectAll(".node")
  .append("text")
    .attr("dy", ".35em")
    .attr("x", d => d.children ? -13 : 13)
    .style("text-anchor", d => d.children ? "end" : "start")
    .text(d => d.data.name);

svg.selectAll(".link")
  .data(root.links())
  .enter().append("path")
    .attr("class", "link")
    .attr("d", d3.linkHorizontal()
        .x(d => d.y)
        .y(d => d.x));

svg.selectAll(".node")
  .on("click", function(event, d) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
    update(d); // 重新渲染组织结构图
  });