D3.js中SVG与Canvas的差异及选型咨询（节点数<100）

作为一个长期用D3.js做可视化的开发者，结合你节点与边数量少于100的场景，来聊聊选Canvas时容易忽略的几个实际问题：

• 交互实现的额外成本
  D3.js对SVG的交互支持非常原生——比如给节点加hover高亮、点击选中，直接用selection.on('mouseover', ...)就能绑定到具体元素。但Canvas里所有图形都是绘制在画布上的像素，没有独立DOM节点，你得自己做坐标碰撞检测：比如mousemove时遍历所有节点，计算鼠标是否落在节点范围内。100个节点的量级虽然不会有性能问题，但确实要多写不少逻辑，如果你需要复杂的交互（比如拖拽单个节点、右键菜单），这点得提前考虑。

• 调试与DOM操作的便利性差异
  SVG的每个元素都是独立DOM节点，你可以直接在浏览器DevTools里选中节点、实时修改属性、查看样式，调试起来非常直观。但Canvas是一个单一的画布元素，里面的图形没法单独选中，调试时只能靠打印坐标、临时绘制辅助线来排查问题。对于新手来说，这可能会增加上手的复杂度，尤其是你还在熟悉D3.js的数据驱动逻辑阶段。

• 样式批量修改的繁琐性
  SVG可以通过CSS统一控制样式：比如给所有节点加同一个class，修改CSS就能批量更新样式。但Canvas的样式是绘制时通过代码设置的（比如ctx.fillStyle = '#ff0000'），如果要批量修改节点样式，你得遍历所有数据更新属性，再重新绘制整个画布。虽然100个节点性能完全没问题，但步骤比SVG繁琐很多。

• 无障碍支持的额外工作
  SVG的元素可以直接添加aria-label、tabindex等无障碍属性，屏幕阅读器能识别到每个节点的信息。但Canvas本身对屏幕阅读器来说是一个"黑盒"——里面的图形无法被识别。如果你的项目需要考虑无障碍，就得额外做映射：比如在Canvas下方添加隐藏的DOM元素，对应每个节点的信息，或者用其他方式让屏幕阅读器能获取到内容，这也是容易忽略的一个点。

• 部分D3.js API的适配需求
  D3.js的核心布局（比如力导向图、树图）是同时支持SVG和Canvas的，但一些针对SVG的便捷API（比如d3.selectAll('circle')）在Canvas里无法直接使用。你需要用数据驱动的方式，结合d3-path等工具生成路径后再绘制到Canvas上。不过你已经试过Canvas示例，这点可能已经有体会，但还是要注意避免下意识用SVG的API去套Canvas的逻辑。

总的来说，结合你节点数量少于100的场景，Canvas完全能满足需求，甚至后续节点数量增长时还有性能余量。但如果上面提到的交互复杂度、调试便利性、无障碍需求等对你的项目很重要，那SVG可能会更省心。根据你的实际需求权衡就好～

内容的提问来源于stack exchange，提问作者nyi