d3架构 d3架构图

https://github.com/d3/d3/wiki/CN-Home D3官网github教程

1、
别人的d3组织结构图，内有github demo地址，可以下来看看。

2、
d3教程(CDSN)

3、SVG教程
https://www.runoob.com/svg/svg-tutorial.html

4、写的很牛逼的D3教程
https://zhuanlan.zhihu.com/p/38001672

开始做了

教程：
辅助教程（必看）https://www.d3js.org.cn/document/

画了几个点出来，一个最简单的demo，看了上两个教程再做，就懂了（一点）

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useRef, useEffect } from 'react';
import _ from 'lodash';
import * as d3 from 'd3';

function Index(props) {
  const tree = useRef(null);
  const [treeNodes, setTreeNodes] = useState([]);
  const [treeLinks, setTreeLinks] = useState([]);
  const data = {
    name: '11111',
    position: '职位',
    children: [
      {
        name: '1111-1111',
        position: '职位',
        children: [
          {
            name: '21332434',
            position: '职位',
            children: [
              {
                name: '9484755',
                position: '职位',
              },
            ],
          },
        ],
      },
      {
        name: '1111-2222',
        position: '职位',
        children: [
          {
            name: '121212',
            position: '职位',
            children: [
              {
                name: '434343434',
                position: '职位',
                children: [
                  {
                    name: 'nodeaaaaa',
                    position: '职位',
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  };

  const SvgWidth = 600;
  const SvgHeight = 400;

  useEffect(() => {
    const treeLayout = d3
      .tree()
      .size([SvgWidth * 0.8, SvgHeight])
      .separation((a, b) => (a.parent === b.parent ? 1 : 2));
    tree.current = treeLayout;

    const hierarchyData = d3.hierarchy(data);
    // hierarchy layout and add node.x,node.y
    const treeNode = treeLayout(hierarchyData);
    setTreeNodes(treeNode.descendants());
    setTreeLinks(treeNode.links());

    const nodes = treeNode.descendants();
    const lines = treeNode.links();
    
    // 画原点
    d3.select('.tree_map')
      .selectAll('circle.node')
      .data(nodes)
      .enter()
      .append('circle')
      .classed('node', true)
      .attr('cx', d => {
        return d.x;
      })
      .attr('cy', d => {
        return d.y;
      })
      .attr('r', 4);

    // 生成线条
    d3.select('.tree_line')
      .selectAll('.links')
      .data(lines)
      .enter()
      .append('line')
      .attr('style', "stroke:rgb(99,99,99);stroke-width:2")
      .classed('links', true)
      .attr('x1', function (d) { return d.source.x; })
      .attr('y1', function (d) { return d.source.y; })
      .attr('x2', function (d) { return d.target.x; })
      .attr('y2', function (d) { return d.target.y; });
  }, []);

  return (
    <svg width={SvgWidth} height={SvgHeight}>
      <g className="tree_map" />
      <g className="tree_line" />
    </svg>
  );
}

export default Index;

效果：

……做完了忘记放上来了。
n久之后忽然想起这个还没收尾。
已经发了一个很菜的包。包名：an-orgTree-react-antd-simple
github上项目开源（https://github.com/3sang/simple-d3-orgTree），需要者可自行改动。如果有可以改进的地方也请多多指正。

效果图如下：