目前真正的問題：需要一個通用的連線路徑畫法 drawLinePath

let drawLinePath = (node1,node2，nodes) => {
  //通過node1和node2的節(jié)點(diǎn)大小和坐標(biāo)信息繪制一條通用優(yōu)雅的有向連線
  return linePath;
}

更：根據(jù)目前的算法和需求分析，引入力導(dǎo)布局算法或許是最優(yōu)解。目前的做法是使用Webgraphviz,在需要自動布局時渲染出svg畫板，再通過設(shè)置setTimeout（Viz渲染生成的dom在主線程中獲取不到），在里邊獲取剛生成的dom節(jié)點(diǎn)的信息和坐標(biāo)，把坐標(biāo)信息賦給真正的流圖畫板。此時，通過Viz()生成的svg畫板功成身退，毀尸滅跡。

結(jié)果，坐標(biāo)信息拿到了，差個坐標(biāo)的相對位置問題和連線路徑。
發(fā)現(xiàn)拿到的坐標(biāo)位置和真正畫板中節(jié)點(diǎn)的坐標(biāo)有誤差（這個只能手動做點(diǎn)調(diào)整）。
主要缺的還是連線路徑，沒有統(tǒng)一的連線公式，準(zhǔn)確說是不知道viz里的連線規(guī)則。

這兩天試著看了d3源碼（因?yàn)闆]找到其他力導(dǎo)布局的js代碼實(shí)現(xiàn)或簡單易解的例子），現(xiàn)在還是一臉蒙蔽。

原問題描述：
目的：給出節(jié)點(diǎn)和連線的json數(shù)據(jù)，用vue繪制一個流圖。畫板中的流圖為若干個有向圖組成、要求流圖中的畫板可縮放，節(jié)點(diǎn)大小可設(shè)置、坐標(biāo)能獲取、能填充圖片、能在下方顯示標(biāo)簽信息、且節(jié)點(diǎn)和連線都有事件監(jiān)聽，節(jié)點(diǎn)可移動，連線位置隨之更新，最最重要的是畫板能自動布局。

json數(shù)據(jù)格式如下:
{
    "nodes":{
      "node1":{
        "id": "node1",
        "imgSrc": "img1",
        "label": "節(jié)點(diǎn)1",
        "width": "50",
        "height": "50",
      },
      "node2":{
        "id": "node2",
        "imgSrc": "img2",
        "label": "節(jié)點(diǎn)2",
        "width": "50",
        "height": "50",
      },
      "node2":{
        "id": "node2",
        "imgSrc": "img1",
        "label": "節(jié)點(diǎn)2",
        "width": "50",
        "height": "50",
      }
    },
    "lines":[
      ["node1","node2"] //表示node1->node2
    ]
}

上圖為以前自己用vue+svg實(shí)現(xiàn)的，沒用其他框架和庫，以上要求實(shí)現(xiàn)了，就是自動布局算法自己寫的有點(diǎn)糙。
現(xiàn)在想要把自動布局算法那塊優(yōu)化，自動布局和連線的路徑畫法是有關(guān)聯(lián)的，不希望有連線重疊從而影響連線的判斷。
網(wǎng)上查到有力導(dǎo)布局，覺得這個或許能實(shí)現(xiàn)我的目的。但是不知道怎么用，用了之后連線的路徑又該怎么設(shè)置，希望老司機(jī)能指點(diǎn)一下