目前真正的問題：需要一個通用的連線路徑畫法 drawLinePathlet drawLinePath = (node1,node2，nodes) => {  //通過node1和node2的節(jié)點大小和坐標(biāo)信息繪制一條通用優(yōu)雅的有向連線  return linePath;}更：根據(jù)目前的算法和需求分析，引入力導(dǎo)布局算法或許是最優(yōu)解。目前的做法是使用Webgraphviz,在需要自動布局時渲染出svg畫板，再通過設(shè)置setTimeout（Viz渲染生成的dom在主線程中獲取不到），在里邊獲取剛生成的dom節(jié)點的信息和坐標(biāo)，把坐標(biāo)信息賦給真正的流圖畫板。此時，通過Viz()生成的svg畫板功成身退，毀尸滅跡。結(jié)果，坐標(biāo)信息拿到了，差個坐標(biāo)的相對位置問題和連線路徑。發(fā)現(xiàn)拿到的坐標(biāo)位置和真正畫板中節(jié)點的坐標(biāo)有誤差（這個只能手動做點調(diào)整）。主要缺的還是連線路徑，沒有統(tǒng)一的連線公式，準(zhǔn)確說是不知道viz里的連線規(guī)則。這兩天試著看了d3源碼（因為沒找到其他力導(dǎo)布局的js代碼實現(xiàn)或簡單易解的例子），現(xiàn)在還是一臉蒙蔽。原問題描述：目的：給出節(jié)點和連線的json數(shù)據(jù)，用vue繪制一個流圖。畫板中的流圖為若干個有向圖組成、要求流圖中的畫板可縮放，節(jié)點大小可設(shè)置、坐標(biāo)能獲取、能填充圖片、能在下方顯示標(biāo)簽信息、且節(jié)點和連線都有事件監(jiān)聽，節(jié)點可移動，連線位置隨之更新，最最重要的是畫板能自動布局。json數(shù)據(jù)格式如下:{    "nodes":{      "node1":{        "id": "node1",        "imgSrc": "img1",        "label": "節(jié)點1",        "width": "50",        "height": "50",      },      "node2":{        "id": "node2",        "imgSrc": "img2",        "label": "節(jié)點2",        "width": "50",        "height": "50",      },      "node2":{        "id": "node2",        "imgSrc": "img1",        "label": "節(jié)點2",        "width": "50",        "height": "50",      }    },    "lines":[      ["node1","node2"] //表示node1->node2    ]}上圖為以前自己用vue+svg實現(xiàn)的，沒用其他框架和庫，以上要求實現(xiàn)了，就是自動布局算法自己寫的有點糙?，F(xiàn)在想要把自動布局算法那塊優(yōu)化，自動布局和連線的路徑畫法是有關(guān)聯(lián)的，不希望有連線重疊從而影響連線的判斷。網(wǎng)上查到有力導(dǎo)布局，覺得這個或許能實現(xiàn)我的目的。但是不知道怎么用，用了之后連線的路徑又該怎么設(shè)置，希望老司機(jī)能指點一下