d3之解决svg元素层叠遮盖问题

问题描述：在创建完节点和连接后，动态新建连接时，连接线会覆盖在节点上面。

连线在节点上面.png

观察此时的svg结构，发现新添加的链路的<g link>在<g node>下面。在svg中，dom元素的渲染顺序是后创建的会覆盖新创建的，就是下面的dom元素会覆盖上面的dom元素。

出现问题的svg结构.png

解决方案：svg中添加元素有两种方式。

1.append("g"),添加到选择集的尾巴。

2.insert("g",".node"),添加到第二个参数的元素的前面。

所以此处添加连接的时候需要采用insert的方法，就可以把<g link>添加到<g node>前面，从而使得符合svg的渲染顺序解决这个问题。

insert()添加连接.png

添加成功后的svg结构，就是我们想要的结构。

正确的svg结构.png