D3.js 选择元素 API 完整参考

D3.js 是一个使用 JavaScript 进行数据可视化的库，提供了强大的选择元素 API 用于操作页面 DOM 元素。本文将详细介绍 D3.js 的选择元素 API，包括选择元素的方法、修改元素的属性、样式和内容以及绑定数据等常用操作。

选择元素

D3.js 选择元素 API 使用 CSS 选择器来选择 DOM 元素。以下是常用的选择器：

• *：选择所有元素
• #id：选择 id 为 id 的元素
• .class：选择 class 为 class 的元素
• element：选择指定名称的元素
• element.class：选择指定名称和 class 的元素
• element, element：选择所有指定名称的元素以及所有指定名称和 class 的元素

D3.js 中的选择元素方法主要有以下几种：

d3.select(selector) // 选择匹配选择器的第一个元素
d3.selectAll(selector) // 选择和选择器匹配的所有元素

修改元素属性和样式

D3.js 可以用来修改元素的属性和样式，以下是常用的方法：

• attr(name, value)：设置元素属性，将属性名为 name 的值设置为 value
• style(name, value)：设置元素样式，将样式名为 name 的值设置为 value
• classed(name, value)：设置元素 class，将 class 名称为 name 的值设置为 value
• text(value)：设置元素文本内容，将元素的文本内容设置为 value

例子：

d3.select("#myElement")
  .attr("width", 100)
  .style("fill", "red")
  .classed("active", true)
  .text("Hello, D3.js!");

绑定数据

D3.js 可以将数据绑定到 DOM 元素上，以下是常用的方法：

• data(data)：绑定数据，将数据绑定到选择集
• enter()：获取 enter selection，即绑定了数据但是没有对应的 DOM 元素的部分
• exit()：获取 exit selection，即有对应的 DOM 元素但是没有绑定数据的部分
• append(name)：添加元素，将指定名称的元素添加到选择集中
• remove()：删除元素，从选择集中删除元素

例子：

// 准备数据
var data = [1, 2, 3];

// 绑定数据并创建元素
var elements = d3.select("#myElement")
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return d * 10; })
  .attr("y", 0)
  .attr("width", 10)
  .attr("height", 10)

// 更新元素属性
elements.attr("fill", "blue");

// 删除元素
elements.exit().remove();

总结

D3.js 的选择元素 API 提供了强大的 DOM 操作能力，可以用来创建和操作页面上的元素。掌握 D3.js 的选择元素 API 对于数据可视化开发非常重要。