4、D3.js 数据选择与绑定的深入解析

D3.js 数据选择与绑定的深入解析

1. D3 子选择技术

在 D3 中，子选择是一种强大的技术，它允许我们在已选择的元素基础上进一步选择特定的子元素。例如，我们可以先选择一个父元素，然后在这个父元素内部选择特定的子元素。以下是一个使用 D3 子选择的代码示例：

d3.select("#section2") // <-- B
    .style("font-size", "2em") // <-- B-1
    .select("div") // <-- C
    .attr("class", "red box");

在上述代码中，首先在 B 行选择了 #section2 元素，然后在 B - 1 行对该元素应用了样式修改，最后在 C 行选择了 #section2 元素内部的 div 元素，并为其设置了类名。这种链式选择的方式定义了一个作用域选择，本质上类似于使用后代选择器 #section2 div 。但这种子选择形式的优势在于，由于父元素是单独选择的，因此可以在选择子元素之前处理父元素。

2. 函数链式调用

D3 API 完全围绕函数链式调用的思想进行设计，几乎形成了一种用于动态构建 HTML/SVG 元素的领域特定语言（DSL）。以下是一个使用函数链式调用构建 HTML 结构的示例：

<script typ