基於 D3.js 實現知識圖譜可視化：技術選型與實現思路

技術棧確認

匯智網知識圖譜極大概率使用 D3.js 構建。D3（Data-Driven Documents）是基於數據操作文檔的可視化庫，擅長 SVG/Canvas 渲染、力導向圖佈局、交互行為綁定。

核心實現步驟

1. 數據準備：將知識實體轉換為節點數組 nodes，關係轉換為邊數組 links，包含 source、target、value 等屬性。
2. 力導向佈局：使用 d3.forceSimulation() 配置 forceLink、forceCharge、forceCenter 等力，自動計算節點位置。
3. 渲染：用 SVG <circle> 繪製節點，<line> 繪製邊，或用 Canvas 提升大數據性能。
4. 交互：拖拽（d3.drag()）、縮放平移（d3.zoom()）、點擊展開詳情、懸停高亮鄰居。

關鍵代碼片段

const simulation = d3.forceSimulation(nodes)
    .force("link", d3.forceLink(links).id(d => d.id).distance(100))
    .force("charge", d3.forceManyBody().strength(-300))
    .force("center", d3.forceCenter(width / 2, height / 2));

const link = svg.append("g").selectAll("line").data(links).enter().append("line");
const node = svg.append("g").selectAll("circle").data(nodes).enter().append("circle").call(drag);

simulation.on("tick", () => {
    link.attr("x1", d => d.source.x).attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x).attr("y2", d => d.target.y);
    node.attr("cx", d => d.x).attr("cy", d => d.y);
});

驗證方法

打開瀏覽器開發者工具 Network 面板，篩選 JS 文件，搜索 d3 關鍵字，即可確認加載的 D3 版本及相關插件。

學習資源

• D3 官網：https://d3js.org/
• 力導向圖示例：Observable D3 Force Graph