Vue3 中利用 D3 为邻接矩阵单元格添加 SVG path 的正确实现方式

在 Vue3 + D3 项目中，直接将 <path> 附加到 <rect> 元素会导致渲染失败（因 <rect> 不支持子元素），且错误的 transform 计算会引发 NaN 值；正确做法是用 <g> 容器统一封装 rect 和 path，并通过 g 统一平移与缩放。

在 vue3 + d3 项目中，直接将 `` 附加到 `` 元素会导致渲染失败（因 `` 不支持子元素），且错误的 `transform` 计算会引发 `nan` 值；正确做法是用 `` 容器统一封装 `rect` 和 `path`，并通过 `g` 统一平移与缩放。

在 D3 可视化中，尤其是邻接矩阵（如《悲惨世界》角色关系图）这类基于网格的图表，常需为每个单元格（cell）叠加自定义图形（如图标、装饰路径）。然而，当从原生 D3 迁移到 Vue3 环境时，一个典型陷阱是：误将 <path> 元素作为 <rect> 的子节点追加。SVG 规范明确规定 <rect> 是空元素（void element），不支持任何子节点——浏览器会静默忽略非法嵌套，导致路径完全不可见，且后续依赖 getBBox() 的动态缩放逻辑因 this.getBBox() 在 <path> 上被错误调用（或在 <rect> 上无意义调用）而返回 NaN，进一步破坏 transform。

✅ 正确解法：引入 <g>（group）作为逻辑容器
不再将 rect 和 path 视为独立兄弟元素，而是统一挂载到 <g class="cell"> 下，并将定位逻辑（translate）上移到 <g> 层级。这样既符合 SVG 结构规范，又避免重复计算、提升性能。

以下是关键代码重构示例（适配 Vue3 + D3 v7+）：

// 在绘制每一行（fillrow）时：function fillrow(row) {  const groups = d3    .select(this)    .selectAll(".cell")    .data(row.filter(d => d.z))    .enter()    .append("g") // ✅ 使用 <g> 作为容器      .attr("class", "cell")      .attr("transform", d => `translate(${this.x(d.x)}, 0)`); // ✅ 平移作用于整个组  // 子元素无需 x 属性或单独 translate  groups    .append("rect")      .attr("width", this.x.bandwidth())      .attr("height", this.x.bandwidth())      .attr("fill", d => this.color(d.z));  groups    .append("path")      .filter(d => d.z % 231 === 0 || d.z === 231)      .attr("d", "M 8.4 70 L 0 70 L 0 0 L 9.8 0 L 35 48.8 L 60 0 L 69.9 0 L 69.9 70 L 61.5 70 L 61.5 15 L 38.1 60 L 31.8 60 L 8.4 15.1 L 8.4 70 Z")      .attr("fill", "#030104")      .attr("opacity", d => this.z(d.z))      .attr("class", "icon")      .attr("transform", function(d) {        const bbox = this.getBBox();        const size = (bbox.width + bbox.height) / 2;        const scale = (this.ownerSVGElement?.viewBox?.baseVal?.width || 70)                       / size * 0.9; // 更健壮的尺寸基准        const tx = (this.ownerSVGElement?.viewBox?.baseVal?.width || 70) - bbox.width * scale;        const ty = (this.ownerSVGElement?.viewBox?.baseVal?.height || 70) - bbox.height * scale;        return `translate(${tx / 2}, ${ty / 2}) scale(${scale})`;      });}

⚠️ 注意事项：

• 避免 getBBox() 在未渲染元素上调用：确保 path 已插入 DOM 且样式已生效（可加 await new Promise(r => setTimeout(r, 0)) 强制重排，但更推荐在 transition().end() 后计算）；
• bandwidth() 替代 rangeBand()：D3 v6+ 已废弃 rangeBand()，务必使用 scale.bandwidth()；
• 过渡动画同步：在 order() 等重排序函数中，需对 .cell 组而非 .rect 进行 selectAll('.cell').attr('transform', ...)，确保 g 容器位置实时更新；
• CSS 选择器兼容性：若需样式控制，优先给 <g> 添加类名（如 class="cell"），而非依赖 rect 或 path 的层级关系。

通过这一结构重构，不仅解决了路径不可见问题，还使代码更符合 D3 的“数据驱动容器”哲学，便于后续扩展交互（如 hover 高亮整个 cell）或响应式缩放。最终效果可在 更新版 CodeSandbox 中验证。

立即学习“前端免费学习笔记（深入）”；