首先,介绍一下D3中三个非常重要的概念Update、Enter、Exit 。
如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择集上。可以想象,会有两个数据没有元素与之对应,这时候 D3 会建立两个空的元素与数据对应,这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3],则会有两个元素没有数据绑定,那么没有数据绑定的部分被称为 Exit
- update 部分的处理办法一般是:更新属性值
- enter 部分的处理办法一般是:添加元素后,赋予属性值
- exit 部分的处理办法一般是:删除元素(remove)
图表的简单交互
图表的交互,一般是通过设置一个或多个监听器,然后触发对应的事件来完成的。
交互的工具一般有三种:鼠标、键盘、触屏
鼠标常用的事件有:
- click:鼠标单击某元素时,相当于 mousedown 和 mouseup 组合在一起。
- mouseover:光标放在某元素上。
- mouseout:光标从某元素上移出来时。
- mousemove:鼠标被移动的时候。
- mousedown:鼠标按钮被按下。
- mouseup:鼠标按钮被松开。
- dblclick:鼠标双击。
键盘常用的事件有三个:
- keydown:当用户按下任意键时触发,按住不放会重复触发此事件。该事件不会区分字母的大小写,例如“A”和“a”被视为一致。
- keypress:当用户按下字符键(大小写字母、数字、加号、等号、回车等)时触发,按住不放会重复触发此事件。该事件区分字母的大小写。
- keyup:当用户释放键时触发,不区分字母的大小写。
触屏常用的事件有三个:
- touchstart:当触摸点被放在触摸屏上时。
- touchmove:当触摸点在触摸屏上移动时。
- touchend:当触摸点从触摸屏上拿开时。
在D3中,监听器是通过on()添加的,例如
1 var circle = svg.append("circle"); 2 3 circle.on("click", function(){ 4 //在这里添加交互内容 5 });
交互小实例
在之前(1)中画过的条形图的基础上,添加交互效果
1 var rects = svg.selectAll(".MyRect") 2 .data(dataset) 3 .enter() 4 .append("rect") 5 .attr("class","MyRect") //把类里的 fill 属性清空 6 .attr("transform","translate(" + padding.left + "," + padding.top + ")") 7 .attr("x", function(d,i){ 8 return xScale(i) + rectPadding/2; 9 } ) 10 .attr("y",function(d){ 11 return yScale(d); 12 }) 13 .attr("width", xScale.rangeBand() - rectPadding ) 14 .attr("height", function(d){ 15 return height - padding.top - padding.bottom - yScale(d); 16 }) 17 .attr("fill","steelblue") //填充颜色不要写在CSS里 18 .on("mouseover",function(d,i){ 19 d3.select(this) 20 .attr("fill","yellow"); 21 }) 22 .on("mouseout",function(d,i){ 23 d3.select(this) 24 .transition() 25 .duration(500) 26 .attr("fill","steelblue"); 27 });
交互进阶
还有一种交互的方式:行为。主要有两种方法:拖拽、缩放
拖拽
D3 中可用 d3.behavior.drag() 来定义拖拽行为,并提供了3种拖拽事件:dragstart、dragend、drag
var drag = d3.behavior.drag() .on("drag", dragmove); //此处用的是drag事件 function dragmove(d) { d3.select(this) .attr("cx", d.cx = d3.event.x )//d3.event.x鼠标当前位置 .attr("cy", d.cy = d3.event.y ); }
缩放
D3 中可用 d3.behavior.zoom() 来定义缩放行为
var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) //scaleExtent 用于设置最小和最大的缩放比例 .on("zoom", zoomed);//当 zoom 事件发生时,调用 zoomed 函数 //zoomed 函数,用于更改需要缩放的元素的属性,d3.event.translate 是平移的坐标值,d3.event.scale 是缩放的值 function zoomed() { d3.select(this).attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); }
图表的动态
D3 提供了 4 个方法用于实现图形的过渡:从状态 A 变为状态 B。
transition():启动过渡效果,其前后是图形变化前后的状态(形状、位置、颜色等)
duration():指定过渡的持续时间,单位为毫秒
ease():指定过渡的方式。linear(普通线性变化)、circle(慢慢变换)、elastic(弹跳变化)、bounce(在最终处弹跳)。 ease(“bounce”)
delay():指定延迟的时间,单位为毫秒。
动态小实例
改变circle1的位置、半径和颜色。
var circle1=svg.append("circle") .attr("cx",100) .attr("cy",500) .attr("r",45) .style("fill","green"); circle1.transition().duration(1000).ease("bounce").attr("cx",300).attr("r",20).style("fill","red");