Fork me on GitHub

D3学习记录3

发表于 | 分类于 ， |
字数统计: 1.6k | 阅读时长 ≈ 5 min

实现动态的方法

动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。（过渡）

D3 提供了 4 个方法用于实现图形的过渡：从状态 A 变为状态 B。

transition()

启动过渡效果。
其前后是图形变化前后的状态（形状、位置、颜色等等），例如：

1
2
3
.attr("fill","red")         //初始颜色为红色
.transition()               //启动过渡
.attr("fill","steelblue")   //终止颜色为铁蓝色

D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。

duration()

指定过渡的持续时间，单位为毫秒。如 duration(2000) ，指持续 2000 毫秒，即 2 秒。

ease()

指定过渡的方式，常用的有：

  • linear：普通的线性变化
  • circle：慢慢地到达变换的最终状态
  • elastic：带有弹跳的到达最终状态
  • bounce：在最终状态处弹跳几次

调用时，格式形如： ease(“bounce”)。

delay()

指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。

1
2
3
4
//对整体指定时：
.transition()
.duration(1000)
.delay(500)

图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。因此，过渡的总时长为1500毫秒。

1
2
3
4
5
6
//对一个一个的图形（图形上绑定了数据）进行指定时：
.transition()
.duration(1000)
.delay(funtion(d,i){
    return 200*i;
})

如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。

Update、Enter、Exit

如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。

Update 和 Enter 的使用

当对应的元素不足时 （ 绑定数据数量 > 对应元素 ），需要添加元素（append）。

  • update 部分的处理办法一般是：更新属性值
  • enter 部分的处理办法一般是：添加元素后，赋予属性值

Update 和 Exit 的使用

当对应的元素过多时 （ 绑定数据数量 < 对应元素 ），需要删掉多余的元素。

  • exit 部分的处理办法一般是：删除元素（remove）

交互式操作

交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。

用户用于交互的工具一般有三种：鼠标、键盘、触屏。

在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。
on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。

鼠标常用的事件有：

  • click：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
  • mouseover：光标放在某元素上。
  • mouseout：光标从某元素上移出来时。
  • mousemove：鼠标被移动的时候。
  • mousedown：鼠标按钮被按下。
  • mouseup：鼠标按钮被松开。
  • dblclick：鼠标双击。

键盘常用的事件有三个：

  • keydown：当用户按下任意键时触发，按住不放会重复触发此事件。该事件不会区分字母的大小写，例如“A”和“a”被视为一致。
  • keypress：当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
  • keyup：当用户释放键时触发，不区分字母的大小写。

触屏常用的事件有三个：

  • touchstart：当触摸点被放在触摸屏上时。
  • touchmove：当触摸点在触摸屏上移动时。
  • touchend：当触摸点从触摸屏上拿开时。

当某个事件被监听到时，D3 会把当前的事件存到 d3.event 对象，里面保存了当前事件的各种参数。如果需要监听到事件后立刻输出该事件，可以添加一行代码：

1
2
3
circle.on("click", function(){
    console.log(d3.event);
});

布局

将不适合用于绘图的数据转换成了适合用于绘图的数据。暂且将布局的作用称为数据转换。

D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。

12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。

布局不是要直接绘图，而是为了得到绘图所需的数据。

为了根据转换后的数据 piedata 来作图，还需要一样工具：生成器。

SVG 有一个元素，叫做路径，是 SVG 中功能最强的元素，它可以表示其它任意的图形。顾名思义，路径元素就是通过定义一个段“路径”，来绘制出各种图形。但是，路径是很难计算的，通过布局转换后的数据 piedata 仍然很难手动计算得到路径值。为我们完成这项任务的，就是生成器。

参考

http://www.ourd3js.com/wordpress/

-------------完结撒花 -------------