https://github.com/d3/d3/wiki/CN-Home
D3官网github教程
1、https://blog.csdn.net/fanxue456/article/details/102505050
别人的d3组织结构图,内有github demo地址,可以下来看看。
2、https://blog.csdn.net/qq_31052401/article/details/93786425
d3教程(CDSN)
3、SVG教程
https://www.runoob.com/svg/svg-tutorial.html
4、写的很牛逼的D3教程
https://zhuanlan.zhihu.com/p/38001672
开始做了
教程:https://www.cnblogs.com/kidsitcn/p/7193629.html
辅助教程(必看)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),需要者可自行改动。如果有可以改进的地方也请多多指正。
效果图如下: