什么是交互
对程序来说,用户输入了某种指令,程序接受到指令之后必须做出某种响应;对可视化图表来说,交互能使图表更加生动,能表现更多内容。例如,鼠标滑到图形上图形出现动画
、鼠标滑到图形上出现提示框
、拖动图表中某些图形、用触屏放大或缩小图形等,这些动画在D3力导向图
中体现的淋漓尽致。
用于用户交互的工具
鼠标、键盘、触屏
如何添加交互
1、来看简单交互的demo
var rect = svg.append("rect");
rect.on("mouseover", function(){
console.log("这里是添加交互的内容");
});
在 D3 中,每一个选择集都有 on() 函数,用于添加事件监听器。on() 的第一个参数是监听的事件,第二个参数是监听到事件后响应的内容,第二个参数是一个函数。
2、 on()
的第一个参数的类型及解释
-
?鼠标常用事件
事件名 含义 click 鼠标单击 mouseover 鼠标进入 mouseout 鼠标移出/离开 mousemove 鼠标移动 mousedown 鼠标按下 mouseup 鼠标松开 dblclick 鼠标双击 -
⌨️键盘操作
事件名 含义 keydown 键盘按下 keyup 键盘释放 keypress 键盘按下字符键 -
触屏操作
事件名 含义 touchstart 触摸屏幕 touchmove 触摸点移动 touchend 离开屏幕
?——结合上一节的折线图
-
鼠标?经过、离开加动画
// 折线图上的圆点 svg .append("g") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("r", 6) .attr("transform", function(d) { return ( "translate(" + (xScale(d[0]) + padding.left) + "," + (yScale(d[1]) + padding.top) + ")" ); }) .attr("fill", "#CCFFFF") .on("mouseover", function(d, i) { // 添加动画 that.d3 .select(this) .style("cursor", "pointer") .transition() .duration(500) .attr("r", 10) .attr("fill", "steelblue"); }) .on("mouseout", function(d, i) { that.d3 .select(this) .transition() .duration(500) .attr("r", 6) .attr("fill", "#CCFFFF"); });
-
鼠标?经过添加标题
// 折线图上的圆点 svg .append("g") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("r", 6) .attr("transform", function(d) { return ( "translate(" + (xScale(d[0]) + padding.left) + "," + (yScale(d[1]) + padding.top) + ")" ); }) .attr("fill", "#CCFFFF") .on("mouseover", function(d, i) { // 添加标题 that.d3 .select(this) .append("title") .text((d, i) => { return d; });
-
完整效果
d3力导向图
-
背景
力导向图非常适合于渲染关系型信息图,可以直观看出各个元素之间的相互作用力。
-
介绍
我们可以把整张
Network
想象成一个物理仿真系统(Simulation
)。系统中的每个节点(Node
)都是一个带有能量的粒子,粒子与粒子之间存在斥力,而被(Link
)所连结的粒子受到牵引力。系统中的粒子在斥力和引力的不断作用下,从随机无序的布局(Layout
)不断发生位移,逐渐趋于平衡有序的布局。同时整个仿真系统的能量也在不断消耗,经过数次迭代后,粒子之间不再发生相对位移,整个系统达到最终稳定平衡的状态。
-
核心
绘制一个力导向图,需要了解一下新的知识点:d3.forceSimulation()/d3.forceSimulation([nodes])
新建一个力导向图,如果没有定义数组,可以为空,到后面可以通过simulation.nodes([nodes])将数组写入d3.forceSimulation().force()
,添加一个力
-
D3.js 中内置了几种经典的力模型
-
1.Centering
中心力可以使得节点最终布局是围绕着某个中心的。相当于某个中心点对所有的节点都有一个制约,不会让布局的中心偏离。 -
2.Collision
- 碰撞力为每个节点都设定一个圆形的碰撞区域,从而防止节点之间重叠。
- 关键参数:radius 碰撞半径
-
3.牵引力(Links)
- 牵引力的强度与节点之间的距离成正比,类似于弹簧力。
- 关键参数:distance。影响两个节点之间的最终距离。
-
4.N 体力(Many-Body)
Many-Body 力是作用于所有节点之间的,是全局的,任何两个节点之间都将受到此力的影响。(与 牵引力 Links 不同,Links 力仅仅会影响有连接关系的两个节点) -
5.方向力(Positioning)
方向力分为 X 方向和 Y 方向,即将作用力限制在一个维度上( X 维度或者 Y 维度)
-