問題描述：需實現(xiàn)，兩個節(jié)點之間，有多條連線，且連線不重合，每條連線有名稱。

難點：在d3中，未使用布局，需要把數(shù)據(jù)處理成符合d3畫圖的樣子才行。連線使用的是'path'，根據(jù)連線的 ‘startKey’ 字段和 ‘endKey’ 來設(shè)定 source 和 target。因為兩個節(jié)點之間的多條線，所以source 和target 相同，線會重合。此時需要想辦法來添加偏移量。

首先要清楚，要添加偏移量，需要知道哪些連線是一組的，先要把兩個節(jié)點之間的連線分成一組。這個思路卡了兩天。

其實就是對原來的連接數(shù)組進行遍歷處理，把start和end都相同的即兩個節(jié)點之間的線放在一個數(shù)組里面。再將這些數(shù)組放到一個新數(shù)組里面，組成一個二維數(shù)組。

當(dāng)數(shù)據(jù)處理完畢之后，以前沒有過處理二維數(shù)組的經(jīng)驗，不知道該怎么用d3來處理它，分不清svg是什么結(jié)構(gòu)，該怎么循環(huán)這個數(shù)組。這塊卡了兩天。

d3是一門把數(shù)據(jù)和dom element綁定的語言，所以應(yīng)該把數(shù)據(jù)結(jié)構(gòu)和svg結(jié)合起來，不能單獨考慮一個，不考慮另外一個。

現(xiàn)在的數(shù)據(jù)結(jié)構(gòu)是一個二維數(shù)組，里面的每一項代表每兩個節(jié)點之間的連線，對應(yīng)的svg結(jié)構(gòu)應(yīng)該是一個類為'link'的<g>，為每一項都與<g> 綁定起來。

然后再對綁定好的選擇集進行遍歷處理，為link繪制路徑，每個link的數(shù)據(jù)結(jié)構(gòu)是一個一維數(shù)組，里面存放的是兩個節(jié)點之間的每條連線的數(shù)據(jù)，對應(yīng)的svg結(jié)構(gòu)應(yīng)該是一個類為'path'的<g>。在綁定之前，應(yīng)該先對數(shù)組中的數(shù)據(jù)進行處理，因為現(xiàn)在的source 和 target的坐標(biāo)還相同，應(yīng)該先給加上不同的偏移量，然后組成一個新的一維數(shù)組。此時這個數(shù)組就是正常的連線數(shù)據(jù)，按照平時一條連線那么處理就可以了。綁定好以后，append('path')以及append('text').

tick()里面關(guān)于連線數(shù)據(jù)的更新也是一個難點，因為你結(jié)構(gòu)不清楚之前，這塊會一團糟，你不知道該怎么寫。只有理清楚了數(shù)據(jù)結(jié)構(gòu)和svg結(jié)構(gòu)，自然而然就好些了。

現(xiàn)在只需 selectAll('link')繼續(xù)遍歷為每一個Link繪制path。

還有一種解決方案：就是使用弧線，path的'd' 屬性使用M arc。需要對arc進行偏移，從同一個點出發(fā)。

周六日有時間完善一下。附個demo。