D3.js 中如何用函数复用逻辑优化 .attr() 调用

本文介绍在 d3.js 中通过 `selection.each()` 封装重复的坐标计算逻辑，避免在多个 `.attr()` 中冗余编写相同数学运算，提升代码可维护性与执行效率。

在使用 D3.js 绘制有向图连线（如 元素）时，常需将线段起点（x1, y1）和终点（x2, y2）从节点中心偏移一定距离，以避免线条穿透节点视觉边界。你当前的实现中，每个 .attr() 回调都独立重复了相同的向量计算（差值、模长、单位方向缩放），不仅代码冗长，还造成不必要的性能开销。

更优解是：将计算逻辑集中到一次执行中，并在 each() 内部直接对当前 dom 元素设置属性。这正是 D3 的 selection.each() 的典型用途——它为每个绑定数据项提供独立作用域，允许你在其中完成所有相关计算，并通过 d3.select(n[i]) 精准操作对应元素。

✅ 正确实现如下：

link.each(function(d, i, n) {   // 1. 计算源→目标的向量差   const diffX = d.target.x - d.source.x;   const diffY = d.target.y - d.source.y;    // 2. 计算欧氏距离（路径总长）   const pathLength = Math.sqrt(diffX * diffX + diffY * diffY);    // 3. 计算单位方向上的偏移量（假设节点半径为 40）   const offsetX = (diffX * 40) / pathLength;   const offsetY = (diffY * 40) / pathLength;    // 4. 一次性设置全部四个坐标属性   d3.select(this) // 推荐用 this 替代 d3.select(n[i])，更简洁且语义清晰     .attr('x1', d.source.x + offsetX)     .attr('y1', d.source.y + offsetY)     .attr('x2', d.target.x - offsetX)     .attr('y2', d.target.y - offsetY); });

? 关键要点说明：

• ✅ this 指向当前被遍历的 DOM 元素（即该 ），比 n[i] 更直观、安全；
• ✅ 所有中间变量（diffX, pathLength, offsetX 等）仅计算一次，显著减少浮点运算次数；
• ❌ 避免尝试在 .attr() 回调中调用外部方法（如 this.myNewPathFunction(d)），因为 this 在 .attr() 中指向的是全局对象或 undefined（非组件实例），且 D3 不支持跨回调共享局部计算结果；
• ⚠️ 注意除零风险：若 pathLength === 0（源与目标重合），需添加保护逻辑（例如 pathLength || 1 或跳过渲染）；
• ? 进阶建议：可将该偏移逻辑进一步抽象为纯函数（如 computeLinkOffset(d, radius = 40)），便于单元测试与复用：

function computeLinkOffset(d, radius = 40) {   const dx = d.target.x - d.source.x;   const dy = d.target.y - d.source.y;   const len = Math.hypot(dx, dy) || 1; // Math.hypot 更健壮   return {     x1: d.source.x + (dx * radius) / len,     y1: d.source.y + (dy * radius) / len,     x2: d.target.x - (dx * radius) / len,     y2: d.target.y - (dy * radius) / len   }; }  // 使用： link.each(function(d) {   const { x1, y1, x2, y2 } = computeLinkOffset(d, 40);   d3.select(this).attrs({ x1, y1, x2, y2 }); // 注意：.attrs() 需 d3-selection v2+ 或自定义扩展 });

综上，selection.each() 是 D3 中处理“多属性依赖同一组计算”的标准范式。它兼顾表达力、性能与可读性，应作为替代重复 .attr() 回调的首选方案。