d3之解決svg元素層疊遮蓋問(wèn)題

問(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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市鳄逾,隨后出現(xiàn)的幾起案子稻轨,更是在濱河造成了極大的恐慌,老刑警劉巖雕凹,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件殴俱,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡枚抵,警方通過(guò)查閱死者的電腦和手機(jī)线欲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)汽摹,“玉大人李丰,你說(shuō)我怎么就攤上這事∈郏” “怎么了嫌套?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)圾旨。 經(jīng)常有香客問(wèn)我,道長(zhǎng)魏蔗,這世上最難降的妖魔是什么砍的? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮莺治,結(jié)果婚禮上廓鞠,老公的妹妹穿的比我還像新娘。我一直安慰自己谣旁,他們只是感情好床佳,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著榄审,像睡著了一般砌们。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,274評(píng)論 1 300
  • 那天浪感,我揣著相機(jī)與錄音昔头,去河邊找鬼。 笑死影兽,一個(gè)胖子當(dāng)著我的面吹牛揭斧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播峻堰,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼讹开,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了捐名?” 一聲冷哼從身側(cè)響起旦万,我...
    開(kāi)封第一講書(shū)人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎桐筏,沒(méi)想到半個(gè)月后纸型,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡梅忌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年狰腌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牧氮。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡琼腔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出踱葛,到底是詐尸還是另有隱情丹莲,我是刑警寧澤,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布尸诽,位于F島的核電站甥材,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏性含。R本人自食惡果不足惜洲赵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望商蕴。 院中可真熱鬧叠萍,春花似錦、人聲如沸绪商。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)格郁。三九已至腹殿,卻和暖如春独悴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背赫蛇。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工绵患, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人悟耘。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓落蝙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親暂幼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子筏勒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)旺嬉。 注意:講述HT...
    kismetajun閱讀 27,476評(píng)論 1 45
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,184評(píng)論 0 3
  • 好久沒(méi)見(jiàn)過(guò) 那時(shí)才有的月光 像一把刀子 刺破了木窗上的塑料簾子 兩個(gè)人頭望著灶火 彼此無(wú)言 木頭被燒得噼啪作響 偶...
    不展眉閱讀 180評(píng)論 0 2
  • 排毒養(yǎng)顏 改善睡眠 凈化血管 祛痘美容 活化細(xì)胞 便秘克星 改善血脂 改善血壓 清腸減脂 纖體控重 ...
    洗煦煦煦煦閱讀 716評(píng)論 0 0
  • 湘湘:培養(yǎng)孩子發(fā)現(xiàn)美食的能力管行。讓孩子擁有創(chuàng)造美食的能力。 美食有親密關(guān)系在當(dāng)中邪媳,當(dāng)很累的時(shí)候捐顷,有美食,高能量的食物...
    妙芷閱讀 388評(píng)論 0 0