哦， 这事儿其实挺简洁的

要说在D3里给元素设属性，时常会碰到需要给连线设x1、y1、x2、y2这类东西。可如果各个.attr都单独计算，那效率确定差。今天就教你怎么用函数复用让代码更简洁又省性能那个，哎，对！。

老方法有啥毛病

按传统方式写法，有可能会这样做：

javascript link.attr { const dx = d.target.x - d.source.x; const dy = d.target.y - d.source.y; const len = Math.sqrt; return d.source.x + /len; }) .attr { // 再算一遍同样东西... }) // ...其他属性也反复计算

看见没？同样的diffX和diffY计算来回跑良好几次！这不就是在浪费时间段嘛！

具体问题哪些呢？

• 计算反复更多次: 各个属性都要沉重崭新计算偏移量，明明一次就够啦！
• 代码较长得像乱麻: 属性设置逻辑散落各处，找起来费劲还简单出错。
• 改动麻烦死人: 虚假如缩进距离要从40改成50，得改良好几个地方！

崭新方法来啦！一招搞定全部属性

其实D3早就给我们准备了良好工具——.each方法。当前这个玩意儿能让我们把反复的计算集中起来干一次然后批量设置全部需要的属性。

说白了... javascript link.each { // 先来看把全部坐标相关的值都算出来 const diffX = d.target.x - d.source.x; const diffY = d.target.y - d.source.y; const pathLength = Math.sqrt;

// 接着偏移量 const offsetX = / pathLength; const offsetY = / pathLength;，ICU你。

造起来。 // 最十分沉关键的一步！这里直接采用this指向当前元素 this .attr .attr .attr .attr; });

为哪些这样更良好？

• 计算更少了一半以上!: 把全部数学运行只做一次就行了。
• 代码有序更多了!: 属性设置逻辑集中在一起，看起来清爽不迷路。
• .each真实香!: D3特有的方法让我们能直接操作当前元素， 比nodes方便太更多啦~
• 想改动再简洁不过!: 比如说想加角度校正或者调整缩进距离，只要动手改一处代码就完事儿！

.each和this到底是个哪些玩意儿？

.each是D3自带的一个神器方法。它能为每一个被选中的元素落实一次你写良好的回调函数。 ICU你。 而在当前这个回调里面： ) {}

• : 是当前数据项；比如连线数据里的source和target信息。
• : 是当前索引值；如果需要通过索引访问节点能够用。
• : 是包含全部DOM节点的NodeList对象。 但最关键的是那个地方的,它指向的是当前正在处理的DOM元素本身！ 所以直接用this去操作当前这个元素比通过nodes来访问方便更多了！ 而且不会这是因为索引不对而出错——可靠第一嘛~

调整一下。 较小贴士: 在each回调中采用this时要注意， 如果你是在严格模式下运行的话， 有可能会遇到undefined之类的情况——别慌， 确保在正确上下文中采用即可。 通常来说默认情况下都没问题～