更多文章，參見大搜車技術部落格：blog.souche.com/
大搜車無線開發中心持續招聘中，前端，Nodejs，android 均有 HC，簡歷直接發到：sunxinyu@souche.com
最近公司業務服務老出bug，各路大佬盯著鏈路圖找問題找的頭昏眼花。某天大佬丟了一張圖過來“我們做一個資源拓撲圖吧，方便大家找bug”。
就是這個圖，應該是馬爸爸家的
好吧，來仔細瞧瞧這個需求咋整呢。一圈資源圍著一箇中心的一個應用，用曲線連線起來，曲線中段記有應用與資源間的呼叫資訊。emmm 這個看起來很像女神在遛一群舔狗... 啊不，是 d3.js 力導向圖！
d3.js 力導向圖
d3.js 是著名的資料視覺化基礎工具，他提供了基本的將資料對映至網頁元素的能力，同時封裝了大量實用的資料操作函式與圖形演算法。其中力導向圖（Force-Directed Graph）是 d3.js 提供的一種十分經典的繪圖演算法。通過在二維空間裡配置節點和連線，在各種各樣力的作用下，節點間相互碰撞和運動並在這個過程中不斷地降低能量，最終達到一種能量很低的安定狀態，形成一種穩定的力導向圖。
d3.js 力導向圖中預設提供了 5 種作用力（以最新的 5.x 為準）：
中心力（Centering）
中心力作用於所有的節點而不是某些單獨節點，可以將所有的節點的中心一致的向指定的位置移動，而且這種移動不會修改速度也不會影響節點間的相對位置。
碰撞力（Collision）
碰撞力將每個節點視為一個具有一定半徑的圓，這個力會阻止代表節點的這個圓相互重疊，即兩個節點間會相互碰撞，可以通過設定 strength 設定這個碰撞力的強度。
彈簧力（Links）
當兩個節點通過設定 link 連線到一起後，可以設定彈簧力，這個力將根據兩個節點間的距離將兩個節點拉近或推遠，力的強度和這個距離成比例就和彈簧一樣。
電荷力（Many-Body）
通過設定 strength 來模擬所有節點間的相互作用力，如果為正節點間就會相互吸引，可以用來模擬電荷吸引力，如果為負節點間就會相互排斥。這個力的大小也和節點間的距離有關。
定位力（Positioning）
這個力可以將節點沿著指定的維度推向一個指定位置，比如通過設定 forceX 和 forceY 就可以在 X軸 和 Y軸 方向推或者拉所有的節點，forceRadial 則可以形成一個圓環把所有的節點都往這個圓環上相應的位置推。
回到這個需求上，其實可以把應用、所有的資源與呼叫資訊都看成節點，資源之間通過一個較弱的彈簧力與呼叫資訊連線起來，同時如果應用與資源間的呼叫有來有往，則在這兩個呼叫資訊之間加上一個較強的彈簧力。
ok說幹就幹
// 所有程式碼基於 typescript，省略部分程式碼
type INode = d3.SimulationNodeDatum & {
id: string
label: string;
isAppNode?: boolean;
};
type ILink = d3.SimulationLinkDatum<INode> & {
strength: number;
};
const nodes: INode[] = [...];
const links: ILink[] = [...];
const container = d3.select('container');
const svg = container.select('svg')
.attr('width', width)
.attr('height', height);
const html = container.append('div')
.attr('class', styles.HtmlContainer);
// 建立一個彈簧力，根據 link 的 strength 值決定強度
const linkForce = d3.forceLink<INode, ILink>(links)
.id(node => node.id)
// 資源節點與資訊節點間的 strength 小一點，資訊節點間的 strength 大一點
.strength(link => link.strength);
const simulation = d3.forceSimulation<INode, ILink>(nodes)
.force('link', linkForce)
// 在 y軸 方向上施加一個力把整個圖形壓扁一點
.force('yt', d3.forceY().strength(() => 0.025))
.force('yb', d3.forceY(height).strength(() => 0.025))
// 節點間相互排斥的電磁力
.force('charge', d3.forceManyBody<INode>().strength(-400))
// 避免節點相互覆蓋
.force('collision', d3.forceCollide().radius(d => 4))
.force('center', d3.forceCenter(width / 2, height / 2))
.stop();
// 手動呼叫 tick 使佈局達到穩定狀態
for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
simulation.tick();
}
const nodeElements = svg.append('g')
.selectAll('circle')
.data(nodes)
.enter().append('circle')
.attr('r', 10)
.attr('fill', getNodeColor);
const labelElements = svg.append('g')
.selectAll('text')
.data(nodes)
.enter().append('text')
.text(node => node.label)
.attr('font-size', 15);
const pathElements = svg.append('g')
.selectAll('line')
.data(links)
.enter().append('line')
.attr('stroke-width', 1)
.attr('stroke', '#E5E5E5');
const render = () => {
nodeElements
.attr('cx', node => node.x!)
.attr('cy', node => node.y!);
labelElements
.attr('x', node => node.x!)
.attr('y', node => node.y!);
pathElements
.attr('x1', link => link.source.x)
.attr('y1', link => link.source.y)
.attr('x2', link => link.target.x)
.attr('y2', link => link.target.y);
}
render();
複製程式碼效果如下：
ok 已經基本實現啦，那就這樣啦，等後臺同學實現一下介面就可以上線啦，日均UV兩位數的產品要啥自行車，有的看就不錯了（手動二哈）。
當然不行了，有這麼一個都市傳說，中臺產品的好用與否與離職率高低成相關關係。本來需要開啟資源拓撲圖就是一件很?的事了，再看到這麼一款體驗極差的產品，感覺分分鐘就要離職了。為了給我司年交易額兩萬億的長遠目標添磚加瓦，我們來看看有啥需要改進的地方。
至少字給我居中吧
注意到我們的字都是左下角定位到節點中心的，這是因為我們使用的是 svg 的 text 元素，預設情況下給 text 元素設定的 x 和 y 代表了 text 元素 baseLine 的起始位置。當然我們可以通過直接設定 dx 與 dy 設定一個偏移量來完成居中的問題，但考慮到 svg 元素相比普通的 html 元素畢竟還是有所限制，並不方便將來的擴充套件啥的，所以我們索性把所有的圓點與文字都換成 html 元素。
...
const nodeElements = html.append('div')
.selectAll('div')
.data(nodes.filter(node => node.isAppNode))
.enter().append('div')
// css modules
.attr('class', styles.NodeItem)
.html((node: INode) => {
return `<p>${node.id}</p>`;
});
const labelElements = html.append('div')
.selectAll('div')
.data(nodes.filter(node => !node.isAppNode))
.enter().append('div')
// css modules
.attr('class', styles.LabelItem)
.html(node => `
<p>${node.label}</p>
<p>Avada Kedavra!</p>
`);
...
const render = () => {
nodeElements
.attr('style', (node) => {
return `transform: translate3d(calc(${node.x}px - 50%), calc(${node.y}px - 50%), 0);`;
});
labelElements
.attr('style', (node) => {
return `transform: translate3d(calc(${node.x}px - 50%), calc(${node.y}px - 50%), 0);`;
});
}
複製程式碼效果如下：
字都居中了！
這個線怎麼跟鐳射似的，一點也不像在遛舔狗
再來看看這個線，我們一開始是把所有代表彈簧力的線段當成直線就畫上去了，但這樣看起來很生硬效果很差。實際上我們需要的是一條自然的曲線把資源節點和應用節點連線起來，同時穿過資訊節點，所以問題就變成了如何穿過三個點畫一條曲線。
要畫曲線自然要用到 svg 的 path 元素和他的 d 繪製指令，關於怎麼用 path 畫曲線，這裡和MDN上都有很詳細的教程。在具體實際專案應用中，一般來說貝塞爾曲線會比較難把控也比較難獲得較好的效果，所以我們使用 A 指令來畫這個弧線。
使用 A 指令畫弧線，需要知道的元素有：x軸半徑，y軸半徑，弧形旋轉角度，角度大小flag，弧線方向flag，弧形的終點。那在已知三個點座標的情況下，怎麼求出這些元素呢？是時候複習一波三角函式了。
已知 A、B、C 座標（xaya、xbyb、xcyc），則可求得 a、b、c 長度（Math.sqrt((x1-x2)2 - (y1-y2)2），再根據餘弦定理可求得∠C，再根據正弦定理可得r，具體參看程式碼：
type IVisualLink = {
id: string;
start: number[];
middle: number[];
end: number[];
arcPath: string;
hasReverseVisualLink: boolean;
};
const visualLinks: IVisualLink[] = [...];
function dist(a: number[], b: number[]) {
return Math.sqrt(
Math.pow(a[0] - b[0], 2) +
Math.pow(a[1] - b[1], 2));
}
...
const pathElements = svg.append('g')
.selectAll('path')
.data(visualLinks)
.enter().append('path')
.attr('fill', 'none')
.attr('stroke-width', 1)
.attr('stroke', '#E5E5E5');
...
const render = () => {
...
nodes
// 過濾出所有的資訊節點
.filter(node => !node.isAppNode)
.forEach((node) => {
...
// 根據資訊節點的資訊得到對應的 visualLink 物件 index
const idx = findVisualLinkIndex(node)
visualLinks[idx].start = [source.x!, source.y!];
visualLinks[idx].middle = [node.x!, node.y!];
visualLinks[idx].end = [target.x!, target.y!];
const A = visualLinks[idx].start;
const B = visualLinks[idx].end;
const C = visualLinks[idx].middle;
const a = dist(B, C);
const b = dist(C, A);
const c = dist(A, B);
// 餘弦定理求得∠C
const angle = Math.acos((a * a + b * b - c * c) / (2 * a * b));
// 正弦定理求得外接圓半徑
const r = _.round(c / Math.sin(angle) / 2, 4);
// 角度大小flag，因為我們要的是條弧線而不是一個殘缺的圓，所以恆為0
const laf = 0;
// 弧線方向flag，根據AB的斜率判斷C在AB線的那一邊，再確定弧線方向
const saf = +((B[0] - A[0]) * (C[1] - A[1]) - (B[1] - A[1]) * (C[0] - A[0]) < 0);
const arcPath = ['M', A, 'A', r, r, 0, laf, saf, B].join(' ');
visualLinks[idx].arcPath = arcPath;
});
pathElements
.attr('d', (link) => {
return link.arcPath;
});
}
複製程式碼效果如下：
這些線一對A都沒有，分不清正反啊
應用與資源間的關係，是有方向的，大部分情況下是應用呼叫資源，也有情況會有雙向的呼叫，除了文字意外，我們還需要加上箭頭來表明是誰在呼叫誰。怎麼加這個箭頭呢？svg 的 path 元素有一個 marker-end 屬性，通過設定這個屬性可以可以將一個 svg 元素繪製到 path 元素最後的向量上。
// 在 svg 元素中新增一個 marker 元素
<svg>
<marker
id="arrow"
viewBox="-10 -10 20 20"
markerWidth="20"
markerHeight="20"
orient="auto"
>
<path
d="M-6.75,-6.75 L 0,0 L -6.75,6.75"
fill="none"
stroke="#E5E5E5"
/>
</marker>
</svg>
...
const pathElements = svg.append('g')
.selectAll('path')
.data(visualLinks)
.enter().append('path')
.attr('fill', 'none')
// 設定 marker-end 屬性
.attr('marker-end', 'url(#arrow)')
.attr('id', link => link.id)
.attr('stroke-width', 1)
.attr('stroke', '#E5E5E5');
...
複製程式碼但直接這樣寫的話，效果會很差，為啥呢？因為我們 path 元素的起點與終點是節點的中心點，直接這樣的話箭頭都在節點上面，如圖：
看到中間那朵菊花沒
所以我們沒法直接通過加這個屬性來加上箭頭，我們需要對 path 做一些處理，對 path 線段去頭去尾。那怎麼做呢？還好有巨佬已經實現了一種演算法，算出兩個 path 元素之間的交點，因此我們可以在算出原 arcPath 後，再算出這條弧線與節點外一個大一點的圓的交點，再把原 arcPath 的起點與終點移到這兩個點上。
import intersect from 'path-intersection';
const render = () => {
...
nodes
// 過濾出所有的資訊節點
.filter(node => !node.isAppNode)
.forEach((node) => {
...
// 根據資訊節點的資訊得到對應的 visualLink 物件 index
const idx = findVisualLinkIndex(node)
visualLinks[idx].start = [source.x!, source.y!];
visualLinks[idx].middle = [node.x!, node.y!];
visualLinks[idx].end = [target.x!, target.y!];
const A = visualLinks[idx].start;
const B = visualLinks[idx].end;
const C = visualLinks[idx].middle;
const a = dist(B, C);
const b = dist(C, A);
const c = dist(A, B);
// 餘弦定理求得∠C
const angle = Math.acos((a * a + b * b - c * c) / (2 * a * b));
// 正弦定理求得外接圓半徑
const r = _.round(c / Math.sin(angle) / 2, 4);
// 角度大小flag，因為我們要的是條弧線而不是一個殘缺的圓，所以恆為0
const laf = 0;
// 弧線方向flag，根據AB的斜率判斷C在AB線的那一邊，再確定弧線方向
const saf = +((B[0] - A[0]) * (C[1] - A[1]) - (B[1] - A[1]) * (C[0] - A[0]) < 0);
const origArcPath = ['M', A, 'A', r, r, 0, laf, saf, B].join(' ');
const raidus = NODE_RADIUS;
const startCirclePath = [
'M', A,
'm', [-raidus, 0],
'a', raidus, raidus, 0, 1, 0, [raidus * 2, 0],
'a', raidus, raidus, 0, 1, 0, [-raidus * 2, 0],
].join(' ');
const endCirclePath = [
'M', B,
'm', [-raidus, 0],
'a', raidus, raidus, 0, 1, 0, [raidus * 2, 0],
'a', raidus, raidus, 0, 1, 0, [-raidus * 2, 0],
].join(' ');
const startIntersection = intersect(origArcPath, startCirclePath)[0];
const endIntersection = intersect(origArcPath, endCirclePath)[0];
const arcPath = [
'M', [startIntersection.x, startIntersection.y],
'A', r, r, 0, laf, saf, [endIntersection.x, endIntersection.y],
].join(' ');
visualLinks[idx].arcPath = arcPath;
});
pathElements
.attr('d', (link) => {
return link.arcPath;
});
...
}
複製程式碼效果已經很接近了！
字疊到一起啦，臣妾看不清啊
到這一步整體效果其實已經差不多了，但追求完美的我們怎麼可能到此為止呢？仔細看看這個圖，因為呼叫資訊是一個方盒而不是原型的節點，如果應用和資源間有來有往，那這個字很容易疊到一起。可以嘗試調整碰撞力（Collision）和彈簧力（Links）來讓他們別疊到一起，不過試下來發現調整這兩個係數很容易把整個圖弄得亂七八糟的。那咋辦呢？我們就要到此為止了嗎？不妨換個思路，如果應用與資源間有來有往，則這個連線資訊就不放到中間點，而是放到開始三分之一處。
說的挺好，我咋知道開始三分之一處在哪？
還好這種「複雜」的數學問題，前人已經幫我們探索的差不多了。svg 標準裡定義了 SVGGeometryElement.getTotalLength 與 SVGGeometryElement.getPointAtLength 兩個方法，通過這兩個方法我們可以獲得 path 路徑的全長，和某一長度時點的位置。不過這兩個方法都是附在 DOM 元素上的，直接呼叫有點麻煩，還好有 PureJS 的實現：
import { svgPathProperties } from 'svg-path-properties';
...
render = () => {
...
labelElements
.attr('style', (link) => {
const properties = svgPathProperties(link.arcPath);
const totalLength = properties.getTotalLength();
const point = properties.getPointAtLength(
link.hasReverseVisualLink ? totalLength / 3 : totalLength / 2,
);
return `transform: translate3d(calc(${point.x}px - 50%), calc(${point.y}px - 50%), 0);`;
});
...
}
複製程式碼最終效果：
還差一點
效果做到這已經差不多了，不過還有一些不完美的地方
- 各種力的係數，在資料不同時不能通用，還必須根據資料不同試出來一個相對通用的係數函式。
- 不能保證所有的節點都在方框內且不重疊
感覺這兩個問題都算是力導佈局的固有缺陷，可能那張圖的實現根本和力導佈局沒啥關係呢?。不過我們使用力導佈局也可以實現不錯的效果，這種 edge case 可以慢慢來解決了就。
Fin