18、D3 数据可视化入门：从基础选择到复杂动态展示

D3 数据可视化入门：从基础选择到复杂动态展示

1. 引言

在数据可视化领域，D3（Data-Driven Documents）是一个强大的工具，它能帮助我们将数据转化为直观的图形。本文将详细介绍 D3 的基础操作，包括元素选择、数据绑定以及如何处理数据与元素的动态更新。

2. 选择元素：.selectAll 方法

在实际的可视化中，很少只处理单个元素，更多时候需要同时操作多个元素。 .selectAll 方法就可以帮助我们选择所有匹配的元素。它的工作方式和 .select 类似，但 .select 只能选择单个元素，而 .selectAll 能选择所有符合条件的元素。

2.1 操作选择元素的属性和样式

通过 .selectAll 选择元素后，可以使用 attr 和 style 操作符来同时操作这些元素的属性和样式。这两个操作符可以接受两种类型的输入：
- 固定值 ：例如 .attr("x", 0) ，会将所有元素的 x 属性设置为 0。
- 函数 ：例如 .attr("y", function(d, i) { return i * 70 + 30 }) ，函数会为每个元素运行一次，计算出该元素特定的属性值。其中，第一个参数 d