17370845950

本文介绍在 d3.js 中避免重复计算、提升可维护性的最佳实践：使用 `selection.each()` 封装路径偏移逻辑，一次性计算 offsetx/offsety 并批量设置 x1/y1/x2/y2 属性。

在构建有向图（如力导向图）时，常需将连线（ 元素）的端点从节点中心“内缩”一定距离（例如避开圆形节点的填充区域），以实现更专业的视觉效果。但若对每个坐标属性（x1, y1, x2, y2）分别编写几乎相同的数学逻辑，不仅代码冗长、难以维护，还会造成同一组中间值（如 diffX, pathLength, offsetX）被重复计算四次——这在大规模图渲染或高频重绘场景下会带来不必要的性能开销。

D3 的核心设计哲学之一是数据驱动 + 函数式链式操作，而 selection.each() 正是衔接“一次性数据处理”与“元素级 DOM 更新”的理想桥梁。它允许你在每个绑定数据项上执行任意 JavaScript 逻辑，并直接访问当前 DOM 元素（通过第三个参数 nodes），从而精准控制属性赋值。

以下是推荐的重构方案：

link.each(function(d, i, nodes) {
  // ✅ 仅计算一次：源-目标向量与模长
  const diffX = d.target.x - d.source.x;
  const diffY = d.target.y - d.source.y;
  const pathLength = Math.sqrt(diffX * diffX + diffY * diffY);

  // ✅ 仅计算一次：单位方向向量 × 半径（40px 偏移）
  const offsetX = (diffX * 40) / pathLength;
  const offsetY = (diffY * 40) / pathLength;

  // ✅ 使用 d3.select() 精准更新当前 line 元素
  d3.select(nodes[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);
});

✅ 关键优势说明：

• 零重复计算：diffX, diffY, pathLength, offsetX/Y 均只计算一次；
• 语义清晰：逻辑集中，便于后续扩展（如支持不同节点半径、箭头长度动态适配）；
• 兼容性强：无需修改数据结构或引入额外作用域变量，完全符合 D3 数据绑定范式；
• 性能友好：尤其在 link 数量达数百以上时，可显著降低 CPU 计算负担。

⚠️ 注意事项：

• 不要尝试在 .attr() 回调中调用未绑定到 this 或全局作用域的函数（如 this.myNewPathFunction），因为 D3 的回调中 this 指向当前 DOM 元素，而非组件实例；若需复用逻辑，应将函数定义为独立工具函数并直接调用（如 calcLinkOffset(d)），但此时仍需注意四次调用带来的重复计算问题；
• nodes[i] 是原生 DOM 元素，d3.select(nodes[i]) 是安全且高效的选取方式，等价于 d3.select(this)，但显式写法更利于调试和理解；
• 若后续需支持 SVG 而非 （例如带贝塞尔曲线的弧形连接），此模式同样适用，只需在 each 内部构造 d 属性字符串即可。

通过 selection.each()，你既保持了 D3 链式调用的流畅性，又实现了逻辑复用与性能优化的双重目标——这才是真正地道的 D3 编程实践。