d3.js选svg而非canvas做关系图，因svg支持dom事件绑定、css样式控制、无损缩放及无障碍属性，适合中等规模可交互图表；canvas虽快但缺乏原生交互与矢量保真能力。
直接用原生 HTML + SVG 就能做出可交互、可缩放、支持拖拽的关系图，不需要引入重型框架；D3.js 是最常用也最灵活的选择，但要注意它不负责渲染，只管数据映射和坐标生成——真正画图的是你写的 SVG 代码。
为什么不用 canvas 而选 svg 做关系图
canvas 渲染快，但节点无法单独绑定事件、不能用 CSS 控制样式、缩放后文字会模糊；svg 每个 <circle></circle> 或 <rect></rect> 都是真实 DOM 元素，支持 addEventListener、getBBox()、CSS 类切换和无障碍属性（如 <title></title>），更适合中等规模（几百节点内）的关系图。
- 节点点击高亮：直接
node.addEventListener('click', () => node.classList.add('active')) - 连线跟随移动：监听
mousemove后重设<line></line>的x1/y1/x2/y2 - 缩放适配：对包裹所有元素的
<g></g>应用transform="scale(1.5) translate(20, -10)"，子元素自动响应 - 导出为图片：用
new XMLSerializer().serializeToString(svg)转成字符串再转 base64，比canvas.toDataURL()更保真
d3.forceSimulation() 布局卡顿或发散怎么办
力导向布局不是“开箱即用”的魔法，它默认参数对中文节点、大权重边、非均匀数据容易震荡或聚堆。关键要调参 + 限制边界 + 提前收敛。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 降低速度衰减：
.alphaDecay(0.02)（默认 0.0228，太小会导致停不下来） - 加位置约束：用
forceX/forceY把中心节点拉向画布中点，比如d3.forceX(width / 2).strength(0.05) - 限制节点移动范围：在
tick回调里手动 clamp 坐标：node.x = Math.max(50, Math.min(width - 50, node.x)) - 提前停止模拟：监听
end事件不够稳，建议加计数器，if (simulation.alpha() 30) simulation.stop()
节点拖拽后连线断开或错位
常见原因是没同步更新连线端点，或者用了 transform 平移节点却忘了重算 <line></line> 的绝对坐标。SVG 中两种平移方式行为完全不同：
- 用
node.attr('cx', newX)改cx/cy：连线端点必须同步改x1/y1等属性 - 用
node.attr('transform', `translate(${dx},${dy})`)：连线仍需按原始坐标 + 偏移量重算，否则视觉上会“脱节” - 更稳妥的做法：所有节点用
cx/cy定位，拖拽时只更新这两个值，并立刻遍历关联的<line></line>更新其x1/y1/x2/y2 - 别忽略
link.source.x这类引用——如果 forceSimulation 已经绑定了数据，拖拽时应直接改link.source.x，而不是只改 DOM 属性
导出 SVG 为 PNG 时文字丢失或错位
根本原因是浏览器对内联 CSS 样式（尤其是 font-family）在序列化时处理不一致，且外部字体未嵌入。不要依赖 toDataURL() 直出。
- 强制内联样式：遍历所有文本节点，把
style属性转成fill、font-size、font-family等独立属性 - 替换字体为安全字体：把
font-family: "Microsoft YaHei"改成font-family: "sans-serif"，避免本地字体缺失 - 用
canvg渲染：将 SVG 字符串传给canvg(canvas, svgString)，再调canvas.toDataURL('image/png')，兼容性更好 - 注意 viewBox：导出前确保
<svg></svg>有明确viewBox，比如viewBox="0 0 1200 800"，否则缩放比例可能错乱
真正难的不是画出连线，而是让节点位置稳定、交互响应及时、导出不失真——这些细节在小 demo 里看不出来，一到真实业务数据（带中文、多层级、异步加载）就全暴露。别跳过坐标 clamp 和 alpha 收敛控制，它们比炫酷动画重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
