1,在bootcdn引入线上的或下载加入
2,绘制画布
3,确定数据结构这里edge必须是source和target
4,创建力导向图布局(linkDistance表示的是点之间的距离,charge表示节点间的电荷数)
5,转换后的数据node
edge转换后的数据
6,绘制图形
7,给图形添加事件
注(要给直线添加stroke不然出不来直线)
8,最后效果
1,在bootcdn引入线上的或下载加入
2,绘制画布
3,确定数据结构这里edge必须是source和target
4,创建力导向图布局(linkDistance表示的是点之间的距离,charge表示节点间的电荷数)
5,转换后的数据node
edge转换后的数据
6,绘制图形
7,给图形添加事件
注(要给直线添加stroke不然出不来直线)
8,最后效果