在D3的数据绑定与元素操作过程中，.attr()方法是设置SVG或HTML元素属性的核心方法，很多场景下多个元素的属性设置逻辑存在重复，直接编写重复代码会降低项目的可维护性。通过函数复用逻辑优化.attr()调用，可以让代码更简洁清晰。
.attr()方法的基本使用
D3的.attr()方法用于设置或获取元素的属性，常见用法是传入属性名和对应的属性值，属性值可以是固定值，也可以是函数，函数接收数据、索引等参数后返回对应的属性值。基础的.attr()调用示例如下：
// 选择所有circle元素，设置半径属性
d3.selectAll("circle")
.attr("r", function(d) {
// d是绑定的数据，这里根据数据返回半径值
return d.value * 2;
});
重复.attr()调用的问题
当多个元素的属性设置逻辑相近时，直接编写重复的.attr()调用会带来以下问题：
- 代码冗余，相同的逻辑需要多次编写，增加代码量
- 后期修改逻辑时需要逐个修改所有重复的地方，维护成本高
- 容易出现修改遗漏，导致不同元素的属性逻辑不一致
比如下面的场景，需要给多个不同类的元素设置基于数据的宽度属性，直接编写的代码会非常重复：
// 重复的.attr()调用示例
d3.selectAll(".bar")
.attr("width", function(d) { return d.score * 10; });
d3.selectAll(".progress")
.attr("width", function(d) { return d.score * 10; });
d3.selectAll(".indicator")
.attr("width", function(d) { return d.score * 10; });
通过函数复用优化.attr()调用
提取公共计算函数
首先可以把重复的属性值计算逻辑提取为独立的公共函数，在.attr()的回调中调用该函数，这样修改计算逻辑时只需要修改公共函数即可。
// 提取公共的计算宽度函数
function calculateWidth(d) {
// 这里可以包含复杂的计算逻辑
return d.score * 10;
}
// 复用公共函数优化.attr()调用
d3.selectAll(".bar")
.attr("width", function(d) { return calculateWidth(d); });
d3.selectAll(".progress")
.attr("width", function(d) { return calculateWidth(d); });
d3.selectAll(".indicator")
.attr("width", function(d) { return calculateWidth(d); });
直接传递函数引用
如果公共函数的参数和.attr()回调的参数完全匹配，还可以直接把公共函数作为.attr()的第二个参数传递，进一步简化代码。
// 公共函数参数与.attr()回调参数匹配
function calculateWidth(d, i) {
// d是数据，i是索引，符合.attr()回调的参数规则
return d.score * 10 + i;
}
// 直接传递函数引用，无需额外包装
d3.selectAll(".bar").attr("width", calculateWidth);
d3.selectAll(".progress").attr("width", calculateWidth);
d3.selectAll(".indicator").attr("width", calculateWidth);
封装复合属性设置逻辑
如果多个.attr()调用是配套出现的，比如同时设置x、y、width、height等属性，还可以把整套属性设置逻辑封装为函数，进一步减少重复代码。
// 封装矩形属性的设置逻辑
function setRectAttr(selection, dataKey) {
return selection
.attr("x", function(d) { return d[dataKey] * 5; })
.attr("y", function(d, i) { return i * 20; })
.attr("width", function(d) { return d[dataKey] * 10; })
.attr("height", 15);
}
// 复用封装的逻辑
setRectAttr(d3.selectAll(".bar"), "score");
setRectAttr(d3.selectAll(".progress"), "progress");
setRectAttr(d3.selectAll(".indicator"), "value");
优化后的优势
通过函数复用优化.attr()调用后，代码会有明显的提升：
- 代码量减少，重复逻辑被统一收归到公共函数中
- 维护成本降低，修改逻辑只需要调整公共函数或封装方法即可
- 代码可读性提升，公共函数的命名可以清晰表达逻辑含义
- 降低出错概率，避免重复编写逻辑时出现不一致的问题
在实际的D3项目开发中，遇到重复的.attr()调用逻辑时，都可以尝试通过函数复用的方式来优化，让代码更简洁易维护。