📚 课程目录第4章血缘可视化

4、血缘可视化：D3.js血缘图渲染、层级布局算法、交互式探索

血缘分析做到一定程度，你会发现一个尴尬的事：分析结果出不来，业务看不懂。

我见过太多团队，血缘关系存在数据库里，字段对字段、表对表，数据全得很。但一问业务方「你这条指标的血缘链路是什么样的？」——没人答得上来。为什么？因为纯文本或表格形式的血缘，信息密度太高，人脑根本处理不了。

所以这一章，我们聊聊怎么把血缘关系「画出来」。而且不是随便画，是画得清晰、可交互、能探索。

4.1 为什么选D3.js？

市面上可视化库很多，ECharts、AntV、Highcharts……但我个人习惯用D3.js做血缘图。原因有三：

底层控制力强：D3直接操作DOM和SVG，你能控制每一个节点、每一条连线的位置和样式。血缘图这种非标准拓扑结构，ECharts的力导向图有时候布局会乱，D3可以自己写布局算法。
交互灵活：展开、折叠、高亮、缩放……这些交互在D3里实现起来很自然，不会受限于框架预设。
社区生态成熟：你想想看，血缘图本质上就是一个有向无环图（DAG）。D3社区里关于DAG布局、树形布局、力导向布局的案例和库非常多，拿来就能改。

我的经验：如果项目工期紧、血缘层级不超过3层，用ECharts的graph类型也能应付。但一旦涉及超过5层的深度链路、或者需要自定义展开/折叠逻辑，D3是更稳妥的选择。

4.2 层级布局算法：把血缘铺平

血缘图最核心的难点不是画节点，而是布局。原始的血缘关系是网状结构，A表依赖B表，B表又依赖C和D，D又依赖E……如果不做布局，画出来就是一团乱麻。

我常用的布局思路是分层布局（Layered Layout），也叫Sugiyama算法。核心思想很简单：

分层：按血缘的上下游关系，把节点分配到不同的层级。最上游（源表）在第0层，下游依次递增。
排序：在同一层内，调整节点的顺序，尽量减少连线交叉。
定位：给每个节点分配具体的x、y坐标。

D3里实现这个，我一般用d3-dag这个库。它封装了Sugiyama布局，用起来很方便。

// 示例：使用d3-dag进行层级布局
import { dagStratify, sugiyama } from 'd3-dag';

// 原始血缘数据：节点ID和上下游关系
const data = [
    { id: 'table_A', parentIds: [] },
    { id: 'table_B', parentIds: ['table_A'] },
    { id: 'table_C', parentIds: ['table_A'] },
    { id: 'table_D', parentIds: ['table_B', 'table_C'] },
    { id: 'table_E', parentIds: ['table_D'] }
];

// 构建DAG结构
const stratify = dagStratify();
const dag = stratify(data);

// 应用Sugiyama布局
const layout = sugiyama()
    .nodeSize([120, 60])  // 节点宽高
    .separation((a, b) => 1.5);  // 节点间距

layout(dag);

// 遍历节点，获取坐标
dag.descendants().forEach(node => {
    console.log(`节点 ${node.data.id}: x=${node.x}, y=${node.y}`);
});

    避坑指南：我曾经在一个项目里直接用力导向布局（force layout）画血缘图，结果节点太多（超过200个），布局跑了10秒还没稳定，而且连线交叉得一塌糊涂。后来换成层级布局，1秒出图，清晰多了。所以记住：血缘图优先用层级布局，力导向布局只适合小规模探索。

4.3 渲染血缘图：节点、连线和箭头

布局算好了，接下来就是渲染。我习惯用SVG来画，因为D3对SVG的支持最好，而且SVG的交互性（hover、click）比Canvas更自然。

一个标准的血缘图节点，至少包含：

矩形/圆角矩形：代表表或字段
文本标签：表名或字段名
状态标识：比如质量正常（绿色）、有告警（黄色）、已失败（红色）

连线部分，我习惯用贝塞尔曲线，而不是直线。为什么？因为层级布局里，连线往往要绕过其他节点，贝塞尔曲线看起来更平滑、更专业。

// 渲染节点
const nodes = svg.selectAll('.node')
    .data(dag.descendants())
    .enter().append('g')
    .attr('class', 'node')
    .attr('transform', d => `translate(${d.x}, ${d.y})`);

nodes.append('rect')
    .attr('width', 120)
    .attr('height', 40)
    .attr('rx', 6)
    .attr('fill', d => d.data.status === 'error' ? '#e74c3c' : '#3498db');

nodes.append('text')
    .attr('x', 60)
    .attr('y', 25)
    .attr('text-anchor', 'middle')
    .attr('fill', '#ffffff')
    .text(d => d.data.id);

// 渲染连线（贝塞尔曲线）
const links = svg.selectAll('.link')
    .data(dag.links())
    .enter().append('path')
    .attr('class', 'link')
    .attr('d', d => {
        const sourceX = d.source.x;
        const sourceY = d.source.y + 20;  // 节点底部
        const targetX = d.target.x;
        const targetY = d.target.y - 20;  // 节点顶部
        const midY = (sourceY + targetY) / 2;
        return `M${sourceX},${sourceY} C${sourceX},${midY} ${targetX},${midY} ${targetX},${targetY}`;
    })
    .attr('fill', 'none')
    .attr('stroke', '#7f8c8d')
    .attr('stroke-width', 2);

4.4 交互式探索：展开、折叠、高亮

静态的血缘图只是「好看」，真正有价值的是交互。我总结三个最实用的交互操作：

4.4.1 展开与折叠

血缘链路往往很深，一次性展开所有节点，屏幕根本放不下。我的做法是：默认只展示第一层，点击节点再展开它的下游。

实现思路：

每个节点存储一个expanded状态
点击节点时，切换expanded，并重新计算布局
用transition()做平滑动画，避免突兀

小技巧：展开时，我习惯把新出现的节点从透明渐变到不透明，同时连线从无到有「生长」出来。这个动画虽然简单，但用户体验提升很明显。

4.4.2 高亮链路

当用户把鼠标悬停在一个节点上，我希望只高亮这个节点所在的完整上下游链路，其他节点变灰。这样用户能一眼看出「这条数据从哪来、到哪去」。

实现方式：

鼠标进入节点时，遍历DAG，找到所有与该节点连通的祖先和后代
给这些节点和连线添加highlight类，其他节点添加dimmed类
鼠标离开时，移除所有高亮和变灰样式

// 高亮链路
function highlightPath(node) {
    // 获取所有祖先和后代
    const ancestors = node.ancestors();
    const descendants = node.descendants();
    const pathNodes = new Set([...ancestors, ...descendants]);

    // 高亮节点
    svg.selectAll('.node')
        .attr('opacity', d => pathNodes.has(d) ? 1 : 0.2);

    // 高亮连线
    svg.selectAll('.link')
        .attr('opacity', d => pathNodes.has(d.source) && pathNodes.has(d.target) ? 1 : 0.1);
}

4.4.3 缩放与拖拽

血缘图一旦超过30个节点，屏幕就装不下了。我一般会加上缩放（zoom）和拖拽（pan）功能。D3的d3.zoom()可以直接绑定到SVG上，实现鼠标滚轮缩放、拖拽平移。

注意：缩放时，节点里的文字大小也会跟着缩放。如果缩得太小，文字会糊成一团。我的做法是：在缩放事件里动态调整文字大小，保证最小字号不低于8px。或者干脆用vector-effect: non-scaling-stroke让描边不随缩放变化。

4.5 完整血缘图示例

说了这么多，不如直接看一个完整的例子。下面这张SVG图展示了一个典型的血缘链路：从源表到中间层，再到应用层，其中有一个节点标红（质量问题），高亮显示了它的完整影响链路。

你看，红色节点「应用层_销售报表」出了问题，它的上游是「中间层_订单明细」和「源表_订单」，下游影响了「BI看板_销售大屏」。通过高亮链路，问题的影响范围一目了然。

4.6 性能优化：节点多了怎么办？

最后聊一个实战问题。我遇到过血缘图里塞了500多个节点，结果浏览器直接卡死。怎么优化？

虚拟滚动：只渲染可视区域内的节点，不可见的节点用占位符代替。D3没有内置虚拟滚动，但可以结合d3.zoom的缩放级别来判断哪些节点需要渲染。
Canvas渲染：如果节点超过1000个，SVG的DOM节点太多会拖慢性能。这时候可以考虑用Canvas来画节点和连线，D3只负责计算布局，渲染交给Canvas。
按需加载：不要一次性加载所有血缘关系。默认只加载第一层，用户展开时再异步加载下一层。这样初始加载快，交互也流畅。

我的习惯：300个节点以内用SVG，超过300个用Canvas。但Canvas的交互（hover、click）需要自己实现命中检测，开发成本高一些。所以如果团队人力紧张，优先用SVG + 按需加载的方案。