問(wèn)題描述:在創(chuàng)建完節(jié)點(diǎn)和連接后童叠,動(dòng)態(tài)新建連接時(shí)慎菲,連接線(xiàn)會(huì)覆蓋在節(jié)點(diǎn)上面嫁蛇。
連線(xiàn)在節(jié)點(diǎn)上面.png
觀察此時(shí)的svg結(jié)構(gòu),發(fā)現(xiàn)新添加的鏈路的<g link>在<g node>下面露该。在svg中睬棚,dom元素的渲染順序是后創(chuàng)建的會(huì)覆蓋新創(chuàng)建的,就是下面的dom元素會(huì)覆蓋上面的dom元素。
出現(xiàn)問(wèn)題的svg結(jié)構(gòu).png
解決方案:svg中添加元素有兩種方式抑党。
1.append("g"),添加到選擇集的尾巴包警。
2.insert("g",".node"),添加到第二個(gè)參數(shù)的元素的前面。
所以此處添加連接的時(shí)候需要采用insert的方法底靠,就可以把<g link>添加到<g node>前面害晦,從而使得符合svg的渲染順序解決這個(gè)問(wèn)題。
insert()添加連接.png
添加成功后的svg結(jié)構(gòu)暑中,就是我們想要的結(jié)構(gòu)壹瘟。
正確的svg結(jié)構(gòu).png