本文介绍在 d3.js 中通过 `selection.each()` 封装重复的坐标计算逻辑，避免在多个 `.attr()` 中冗余编写相同数学运算，提升代码可维护性与执行效率。
在使用 D3.js 绘制有向图连线（如
更优解是：将计算逻辑集中到一次执行中，并在 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() 回调的首选方案。
