官方网站：https://d3js.org/
- 什么是D3.js
D3 的全称是（Data-Driven Documents）,是一个用动态图形显示数据的JavaScript库，一个数据可视化的工具。兼容W3C标准，并且利用广泛实现的SVG，JavaScript，和CSS标准。它是早期的Protovis框架的继承者。与其他的类库相比，D3对视图结果有很大的可控性。 - D3 API总结
核心 - 包括选择器，过渡，数据处理，本地化，颜色等。
地理 - 球面坐标，经纬度运算。
几何 - 提供绘制2D几何图形的实用工具。
布局 - 推导定位元素的辅助数据。
比例尺 - 数据编码和视觉编码之间转换。
可缩放矢量图形 - 提供用于创建可伸缩矢量图形的实用工具。
时间 - 解析或格式化时间，计算日历的时间间隔等。
行为 - 可重用交互行为 - 各API解析
3.1 核心模块
★ 选择器：
D3提供了两种高级方法来选择元素：select和selectAll。这些方法接收选择器字符串。前者只返回第一个匹配的元素，后者选择在文档遍历次序中所有匹配的元素。这个方法也可以接受节点，这可以用来和第三方库例如JQuery或者开发工具($0)整合。
★ 编辑内容1
# selection.attr(name[, value])
如果指定了value参数，将为所有选中的元素通过指定的name为指定的value设置属性。如果value是一个常数，那么所有的元素都将设置为相同的属性值；如果value是一个函数，那么这个函数会为每个选中的元素（按顺序）计算。入参是当前数据元素d和当前索引i，以及代表当前DOM元素的this上下文。这个函数的返回值接下来用来设置每个元素的属性。null值将移除指定的属性。
如果value参数没有指定，就会返回为选择中第一个非空（null）元素所指定的属性值。一般来说，只有当你知道选择中恰好包含一个元素时才有用。1
# selection.classed(name[, value])
这个操作能识别class属性是一个按照空格分隔的标记集合。这样它就能使用classList（如果有的话）来方便地添加、移除和切换CSS类。
和attr()大致相同，如果value属性被指定，不论是否指定类都会与选定元素相结合。如果value是一个常量且其值为真，那么所有的元素都会被分配指定的类（还没分配的话）。如果其值为假，那么就会移除选中元素的class（已经分配过）。如果value是一个函数，那么这个函数会为每个选中的元素（按顺序）计算。入参是当前数据元素d和当前索引i，以及代表当前DOM元素的this上下文。这个函数的返回值接下来用来分配或者不分配每个元素的class。
如果你想一次设置多个class可以使用一个对象，文字如同：selection.classed({‘foo’: true, ‘bar’: false})，或者使用以空格分隔的class列表形如：selection.classed(‘foo bar’, true)。
如果value没有被指定，当且仅当选择中首个非空值有指定的class就会返回true。一般来说，只有当你知道选择中恰好包含一个元素时才有用。1
# selection.style(name[, value[, priority]])
和attr()大致相同，如果value参数被指定，通过指定名称和指定的值为所有选中的元素设置CSS样式属性。如果value是一个常数，那么所有的元素都设置相同的样式值；否则，如果值是一个函数，则该函数为每个选定的元件（按顺序）计算，入参是当前数据元素d和当前索引i，以及代表当前DOM元素的this上下文。该函数的返回值被用来设置每个元素的样式属性。 null值将删除样式属性。可选参数priority也可以指定，无论是null空或字符串“important”（不带感叹号）。1
2// 如果你想一次设置多个样式属性，使用对象文本，如下所示：
selection.style({'stroke': 'black', 'stroke-width': 2})
1 | # selection.property(name[, value]) |
一些HTML元素具有特殊的属性使用标准的属性或样式是不可寻址的。例如，表单文本（text）字段有一个value字符串属性，复选框（checkboxes）有一个checked布尔型属性。可以使用property操作符来获取或设置这些属性，或任何其他基本元素的可寻址字段，例如className。
value参数的介绍和attr()大致相同；1
2//如果你想一次设置多个属性，可以使用对象文本，如下所示：
.property({'checked':true,'disabled': false});。
如果未指定值，则返回在选择中第一个非空元素指定属性的值。只有当你知道选择只包含一个元素这通常是很有用的。1
# selection.text([value])
文本操作符是基于textContent属性；设置文本内容将取代任何现有的子元素。
value参数的介绍和attr()大致相同；1
# selection.html([value])
html的操作基于innerHTML属性；设置内部HTML内容将取代任何现有的子元素。此外，您可能更愿意使用数据驱动的方式append或insert操作创建HTML内容;该操作符的目的是，适用于你想用少量但有丰富格式的HTML。
value参数的介绍和attr()大致相同；1
# selection.append(name)
在当前选择的每个元素最后追加具有指定名称的新元素，返回包含追加元素的新选择。每个新的元素继承当前元素的数据（如果有的话）和select相同的方式使用子选择。
这个name可以被指定为一个常量字符串或一个函数，返回追加的DOM元素。当name被指定为一个字符串，它可能有以下形式的命名空间前缀“namespace:tag”。例如，“svg:text”将在svg命名空间创建“text”元素。默认情况下，D3支持svg，xhtml，xlink的，xml和xmlns命名空间。其他的命名空间可以通过添加到d3.ns.prefix注册。如果没有指定命名空间，那么命名空间会从封闭的元素继承；或者，如果该名称是已知的前缀之一，相应的命名空间将被使用（例如，“svg”表示“svg:svg”）。1
# selection.insert(name[, before])
在当前选择与指定before选择器匹配的每个元素之前插入具有指定name的新元素，返回包含插入的元素的一个新的选择。如果before选择器不匹配任何元素，那么新元素将用append追加为最后一个子元素。每一个新元素继承当前元素（如果有的话）的数据，子选择（subselections）和select以同样的方式。
同样地，before选择器可以被指定为一个选择器字符串或一个函数，它返回一个DOM元素。例如，insert(“div”, “:first-child”)将在当前选择前面加上div子节点。对于enter选择器，before选择器在这种情况下也可以省略：输入的元素将被立即插入到更新选择紧随的兄弟元素前（如果有的话）。这使您可以插入DOM的元素与绑定的数据是一致的顺序。但是请注意，如果更新元素修改了顺序，selection.order可能仍然需要。1
# selection.remove()
删除从当前文档当前选择中的元素。返回“屏幕外（off-screen）”的当前选择（除去了相同的元素），从DOM分离。需要注意的是目前还没有一个专门的API来重新添加删除的元素到文档；然而，你可以通过一个函数来selection.append或selection.insert重新添加元素。
★ 操作数据：1
# selection.data([values[, key]])
连接指定的一组数据的和当前选择。指定的values是一组数据值（例如，数字或对象）或一个函数返回一组值。如果没有指定key函数，则values的第一数据被分配到当前选择中第一元素，第二数据分配给当前选择的第二个元素，依此类推。当数据被分配给一个元素，它被存储在属性data中，从而使数据“沾粘”，从而使数据可以再选择。