D3：基于数据绘图总结

D3：基于数据绘图总结

日期：2020.10.9

作者：2018届FYS

标签：数据可视化

一、D3使用的数据

1. D3能使用保存到 .txt 纯文本文件， 或者 .csv 逗号分隔值文件，或者 .json JSON 文档中的数据。
2. csv文件中的值都是字符串型。

二、连缀方法

• .select(“body”):向 select() 方法传入一个 CSS 选择符作为输入，它就会返回一个对 DOM 中匹配的第一个元素的引用。（如果想取得多个元素，可以使用 selectAll() 方法。） 这里只是取得文档的 body 元素，然后把对它的引用交给调用链中的下一个方法。
• .append(“p”):append() 会创建一个你指定的新 DOM 元素，然后将它追加到调用它的元素末尾（作为最后一个子元素）。这里创建了一个 p 元素，因为调用该方法的是 body，所以结果就是在 body 元素内部追加一个 p 元素。最后，append() 把刚刚创建的新元素的引用交给下一个方法。
• text(“New paragraph!”): text() 接受一个字符串，把它插入到当前元素的开始和结束标签之间。因为上一个方法传递过来一个 p 元素，因此这里就会把文本插入到

  和

  之间。 （如果标签间原来有内容，原来的内容会被覆盖。）

• ；：表示一行代码结束。连缀完成。

运行该行代码结果如下：

不用连缀也能实现上述功能，可以根据自己的喜好选择。

三、绑定数据

由于数据必须绑定到页面中的元素上才能实现可视化，因此需要先创建页面元素再将数据绑定到这些页面元素上。通过 D3 的 selection.data() 方法可以把数据绑定到 DOM 元素。但必须具备以下两个条件：

1. 数据
   （1） 加载CSV数据

• CSV（Comma-Separated Value）意思是逗号分隔的值，因此CSV文件的数据都是用逗号将值与值隔开。
  

• d3.csv() 方法：csv() 接受两个参数，表示 CSV 文件路径的字符串和用作回调函数的匿名函数。回调函数只有在把 CSV 文件加载到内存之后才会执行。因此可以确定，在调用这个函数时，d3.csv() 已经把数据加载完了。

需要注意的是:d3.csv()是一个异步方法,它在加载数据的同时，其他 JavaScript代码会照样执行；并且回调函数无论是否成功加载数据文件都会执行。

（2）加载JSON数据
使用d3.json() 方法可以像使用 d3.csv() 一样加载 JSON 数据。

2. 选中的DOM元素
   （1）enter()方法
   该方法可以将数据绑定到了 DOM 中新创建的元素，接下来通过下面这个例子具体介绍：
   

• d3.select(“body”)：选择 DOM 中的 body 元素，把它交给连缀方法中的下一个方法。

• .selectAll(“p”)：选择 DOM 中的所有段落。因为还没有段落，所以返回空元素。可以认为这个空元素代表马上就会创建的段落。

• .data(dataset)：解析并数出数据值。dataset数组中有几个值，此后的所有方法就将执行几遍，每次针对一个值。

• .enter()：要创建新的绑定数据的元素，必须使用 enter()。这个方法会分析当前选择的 DOM 元素和传给它的数据，如果数据值比对应的 DOM 元素多，就创建一个新的占位元素。然后把这个新占位元素的引用交给链中的下一个方法。

• .append(“p”)： 取得由 enter() 创建的空占位元素，并把一个 p 元素追加到相应的 DOM 中。

• .text(“New paragraph!”)：取得新创建的 p 元素，插入文本值。
  因此该代码运行结果为：
  PS:
  D3 绑定的数据没有出现在 DOM 中，而是作为该元素的 _ data _ 属性保存于内存中。控制台就是确认数据绑定是否正确的一个工具。

  (2) data()方法
  在连缀方法中，只 要调用 data() 了，就可以随时创建一个接收 d 为输入的匿名函数。与当前元素对 应，方法 data() 确保了每个 d 都会被赋予原始数据集中的一个值。
  注意：若不把d封装在匿名函数里，而是直接传入，d就没有值。没有匿名函数及其接收数据值的参数d，D3将无法把当前数据值传进来。
  （3）自定义函数
  匿名函数：无名字的函数；
  

  命名函数：把函数保存在一个变量中。
  

四、 绘制DIV

HTML 的div元素是绘制矩形的最简单手段。以下是在绘制DIV过程中会用到的几个方法。
（1）attr() 方法
attr() 用于设定 HTML 元素的属性和值。而 HTML 属性就是包含在尖括号 <> 中 的任意属性 / 值对。
例如给某个元素添加一个 bar 类：

（2 style() 方法
例如让那些数值大于某个阈值的文本显示为红色：

attr() 和 style() 可以分别用来设置取得的元素的HTML 属性和 CSS 属性，但是区别是attr() 设定 DOM 属性的值，而 style() 直接给元素 添加 CSS 样式。（style()方法执行的结果等价于在HTML的style属性中直接写入CSS规则)
（3）classed() 方法
用于快速地添加或删除元素的类。