js實現(xiàn)流圖自動布局算法實現(xiàn)？

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

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

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

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

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

原問題描述：
目的：給出節(jié)點和連線的json數(shù)據(jù)，用vue繪制一個流圖。畫板中的流圖為若干個有向圖組成、要求流圖中的畫板可縮放，節(jié)點大小可設置、坐標能獲取、能填充圖片、能在下方顯示標簽信息、且節(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)了，就是自動布局算法自己寫的有點糙。
現(xiàn)在想要把自動布局算法那塊優(yōu)化，自動布局和連線的路徑畫法是有關(guān)聯(lián)的，不希望有連線重疊從而影響連線的判斷。
網(wǎng)上查到有力導布局，覺得這個或許能實現(xiàn)我的目的。但是不知道怎么用，用了之后連線的路徑又該怎么設置，希望老司機能指點一下