D3.js 选择

D3 可以选择一些 HTML 或 SVG 元素并更改它们的样式和/或属性： d3.select 和 d3.selectAll 。

这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素，并采用 CSS 选择器字符串的形式（例如 div.item ， #my-chart 或 g:first-child ）。

[//]: .classed 是一个 boolean.

除了将常量值传递给 .style , .attr , .classed , .property ,之外 .text ， .html 您还可以传入一个函数。例如：

该函数接受两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 （或“数据”）。 i 是选择中元素的 索引 。

此方法有两个参数：第一个是指定事件类型的字符串第二个是触发事件时调用的函数（“回调函数”）。此回调函数有两个参数，通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。

最常见的事件包括（有关详细信息，请参阅 MDN 事件参考）：

在事件回调函数中， this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下 *** 作：

[//]:这 this 是一个 DOM 元素，而不是 D3 选择，因此如果您想使用 D3 修改它，您必须首先使用 d3.select(this) .

.append 可以使用 D3和 .insert 方法将元素添加到选择的元素中。可以使用 删除元素 .remove 。

.append 将一个元素附加到选择中的每个元素。如果元素已经有子元素，则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。

.insert 类似于 .append 但它允许我们指定第二个参数， 该参数指定（作为 CSS 选择器）在哪个元素之前插入新元素 。

.remove 从页面中 删除选择中的所有元素 。例如，给定一些圆圈，您可以使用以下方法删除它们：

大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 .style 可以 .attr 链接 .on 起来。例如：

该 .each 方法允许您为 选择的每个元素 调用一个函数。

回调函数有两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。

这是一个示例， .each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数，并相应地修改圆：

该 .call 方法允许调用一个函数， 选择本身 作为第一个参数传递给该函数。

.call 在您想要对选择进行 *** 作的可重用函数时很有用。

例如， colorAll 获取一个选区并将选区元素的填充设置为橙色：

您可以使用 D3 的 .filter 方法过滤选择。第一个参数是一个函数，它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回，因此您可以继续链接选择方法。

在此示例中，您过滤偶数元素并将它们着色为橙色：

通过调用 .sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数，通常是 a 和 b ，它们代表被比较的两个元素的数据。如果比较器函数返回负数， a 将放在前面 b ，如果是正数， a 将放在后面 b 。

这些数据都是扁平化的2维表格结构，直接查询不能直接体现出用户和群之间的直接或者间接关系。通过数据可视化，可以把扁平结构的数据作为点和线连接起来，从而更加直观的显示出来从而进行分析。

d3.js是一个近年来推出的基于javascript的数据展示库，全称为Data Driven Document， 在浏览器数据展示领域的地位类似于通用js框架里的jQuery。d3.js的官网是d3js.org，大家可以在上面看到很多例子和应用。d3.js也是图形数据库neo4j所内置的数据展示工具。

---