D3 属性与 Attr

D3.js是一个强大的JavaScript库，它使用数据来操作文档对象模型（DOM）。其中，属性（Attributes）和Attr（Attribute Functions）是两个常用的概念。

属性

属性是DOM元素的可读写特性，比如文本元素的文字内容和图像元素的src属性。D3.js提供了多个方法来读取和设置属性，比如attr()、style()和property()。

attr()

attr()方法是D3.js中最常用的属性方法，它可以读取和设置元素的属性。语法如下：

selection.attr(name[, value])

其中，name是要读取或设置的属性名称，value是要设置的属性值。

举个例子，我们可以使用attr()方法来设置一个div元素的class属性：

d3.select('div')
  .attr('class', 'my-div');

上述代码会将所有div元素的class属性设为my-div。

Attr

Attr是一种属性函数，可以根据数据动态生成属性值。比如，我们可以使用scaleLinear()方法生成一个线性比例尺，然后将它的输出值作为rect元素的width属性值。

举个例子，我们可以使用如下代码来生成一个简单的条形图：

var data = [10, 20, 30, 40, 50];

var x = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 500]);

d3.select('svg')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', 0)
  .attr('y', function(d, i) { return i * 25; })
  .attr('width', function(d) { return x(d); })
  .attr('height', 20);

上述代码会在svg元素中生成一组条形图。其中，x(d)是一个Attr函数，它将数据映射到输出值并动态生成属性值。

总结

D3.js的属性和Attr函数是操作DOM元素的重要工具。在使用D3.js时，程序员需要熟练掌握这两个概念，并在实践中加以应用。