D3.js 数据可视化

(本文是学习过程中的摘录,后续会整理)

什么是数据可视化

数据可视化就是把信息映射成可见图形的过程

交互式可视化

静态可视化需要多个静态图才能展示信息的多个方面

D3 - Data Driven Documents

学习D3的过程,就是学习那些告诉它如何加载、绑定数据,变换和过渡元素的语
法的过程

D3主要用于生成那些解释型的,而非探索型的可视化图形。 Tableau 和 ggplot 就是探索性工具

解释型视图约束条件更多,限制也更多,同时也更容
易做专做精,而且主要用于传达最重要的信息

数据是结构化的信息

D3 外部加载数据的方式

  • csv
    d3.csv(‘filename’, function(error, data) {})
  • json
    d3.json(‘filename’, function(error, data) {})

SVG - Scalable Vector Graphics

svg 图表默认是 inline-block

扁平化色彩生成方法

使用RGB色彩模型的时候,R、G、B中任选两个颜色值设置为一样,然后剩下的一个设置为255即可

更新图表的步骤

  1. 取得最新数据
  2. 更新比例尺domain,而range一般不用更新,因为range一般来说是相对于屏幕的宽度
  3. 更新图像坐标(x, y)等
  4. 更新文本
  5. 更新坐标轴(axis)

一定要注意操作的顺序,特别是动画的时候

D3 添加和删除数据的方法

Enter 和 Exit 来在需要添加和删除数据时操作

d3.selectAll(“xxx”).data(dt)

===> 产生Join,结果形式为
    {   // ==>  update 集
        ...
        enter: function(){}, // ==> enter 集
        exit:  function(){}  // ==> exit 集
    } 

每一次绑定数据,就会产生 update, enter, exit 集合

SVG Group 的用处

  1. Grouping - To group a set of SVG elements that share the same attribute - 对类似元素归类的作用
    • 使用了 Group 以后, group 中的元素就通过相对于 group 的位置来定位了, 这样比较方便开发
  2. Transforming - To define a new coordinate system for a set of SVG elements by applying a transformation to each coordinate specified in this set of SVG elements - 可以一起平移,旋转group 中的元素。
    transform 的类型
    • matrix
    • translate
    • scale
    • skewX
    • skewY

D3 的 Select 是如何工作的

多次 selectAll 并不会造成笛卡尔乘积。 伴随着一次新的 selectAll, 上一次 selectAll 的结果会形成一个 group

every element in the old selection becomes a group in the new selection

比如 d3.selectAll(‘tr’).selectAll(‘td’) 会生成 16 个元素,假设每个表格单元格中有一个span,那么下面的选择会生成16个 span 组

d3.selectAll('tr').selectAll('td').selectAll('span')

当对 selection 设置 attr 或者 style 时使用 function 时, function 的第二个参数 i 是指组内的数组 index 而不是 selections 的 index

your function (i) is the within-group index rather than the within-selection index.

selection 的 append 和 insert 操作是对 select 的封装

d3.selectAll('section').append('p') 

返回的是一个group,group中有四个元素的结构

D3 的数据绑定

when you bind data to a selection, the data is stored in the DOM rather than in the selection

数据绑定的三种方法:

  • 使用 data() 方法去和 selection 做 join
  • 使用 datum() 给单独一个 DOM element 设置数值
  • 从父节点通过 append, insert, select继承

data()

selection.data defines data per-group rather than per-element: data is expressed as an array of values for the group, or a function that returns such an array. Thus, a grouped selection has correspondingly grouped data!

After enter.append, the update selection is modified to contain both entering and updating elements. The update selection subsequently contains all currently-displayed elements

对于enter() 的数据,当执行 append 以后会添加到 update 集合中空缺的位置上去,所以 enter().append() 后,update可以得到所有的新的节点

注意在更新数据时的引用使用

var p = d3.select('body').selectAll('p')
var data = [1,2,3]
// incorrect use
p.data(data).enter().append() // append node
p.attr() ...                  // for update. this will not work. since p is an old reference

// correct use
var update = p.data(data)  // store the update reference
update.enter().append()  // append as usual
update.attr()            // update

实战 - 绘制直方图

实战 - 绘制对比条形图