D3.js selection.attr()函数

简介

D3.js（Data-Driven Documents）是一个基于数据的JavaScript库，用于创建数据可视化效果。D3.js的selection.attr()函数用于设置或获取选中元素的属性。

语法

selection.attr(name[, value])

• name：要设置或获取的属性名称。
• value：（可选）要设置的属性值。

说明

• 如果value参数被提供，则attr()函数将设置选中元素的属性为指定的值，并返回选择集（selection）以便支持链式调用。
• 如果value参数未提供，则attr()函数将返回第一个选中元素的属性值。
• 如果选择集包含多个元素，则只返回第一个元素的属性值。

示例

// 创建一个svg容器
var svg = d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 200);

// 创建一个矩形元素
var rect = svg.append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 100)
  .attr("height", 100)
  .attr("fill", "red");

// 获取矩形元素的宽度属性值
var width = rect.attr("width");
console.log(width);  // 输出: 100

// 设置矩形元素的颜色属性值为蓝色
rect.attr("fill", "blue");

注意事项

• 属性名称大小写敏感。
• 属性值可以是字符串、数字或函数。
• 当使用函数作为属性值时，函数的参数通常为数据和索引，返回转换后的属性值。

参考资料

• D3.js documentation