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