4、D3.js 数据选择与绑定全解析

D3.js 数据选择与绑定全解析

1. D3子选择与函数链式调用

在D3中，子选择技术是一项非常有用的功能。例如，通过链式选择可以实现作用域选择。以下代码展示了如何选择嵌套在 #section2 下的 div 元素：

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

在这个代码片段中，首先选择 #section2 元素，然后对其应用样式修改，最后选择嵌套的 div 元素并设置其类名。这种方式的优点是可以在选择子元素之前处理父元素。

D3的API围绕函数链式调用设计，几乎形成了一种用于动态构建HTML/SVG元素的领域特定语言（DSL）。下面的代码展示了如何使用函数链式调用来创建动态视觉内容：

<script type="text/javascript">
  var body = d3.select("body"); // <-- A
  body.append("section") // <-- B
      .attr("id", "section1") // <-- C
    .append("di