D3.js系列——交互式操作和布局

Posted 2020-10-27 古兰精

一、图表交互操作

　　与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。

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

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

　　添加交互：对某一元素添加交互操作十分简单，代码如下：

var circle = svg.append("circle");
 
circle.on("click", function(){
    //在这里添加交互内容
});

　　这段代码在 SVG 中添加了一个圆，然后添加了一个监听器，是通过 on() 添加的。在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。

　　on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。

　　鼠标常用的事件有：

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

　　键盘常用的事件有三个：

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

　　触屏常用的事件有三个：

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

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

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

　　实例：添加鼠标移入（mouseover），鼠标移出（mouseout）两个事件的监听器。监听器函数中都使用了 d3.select(this)，表示选择当前的元素，this 是当前的元素，要改变响应事件的元素时这么写就好。

.attr("fill","steelblue")
.on("mouseover",function(d,i){
    d3.select(this)
        .attr("fill","yellow");
})
.on("mouseout",function(d,i){
    d3.select(this)
        .transition()
        .duration(500)
        .attr("fill","steelblue");
});

二、布局

　　布局，可以理解成 “制作常见图形的函数”，有了它制作各种相对复杂的图表就方便多了。

1、布局是什么

　　布局，英文是 Layout。从字面看，可以想到有“决定什么元素绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。D3 与其它很多可视化工具不同，相对来说较底层，对初学者来说不太方便，但是一旦掌握了，就比其他工具更加得心应手。下图展示了 D3 与其它可视化工具的区别：

　　可以看到，D3 的步骤相对来说较多。坏处是对初学者不方便、也不好理解。好处是能够制作出更加精密的图形。因此，我们可以据此定义什么时候选择 D3 比较好：

• 选择 D3：如果希望开发脑海中任意想象到的图表。
• 选择 Highcharts、Echarts 等：如果希望开发几种固定种类的、十分大众化的图表。

2、如何理解布局

　　从上面的图可以看到，布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。为了便于初学者理解，可以将布局的作用理解成：数据转换。

3、布局有哪些

　　D3 总共提供了 12 个布局：

　　饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。

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