D3入门系列(3)--简单的交互与动态

首先,介绍一下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");

 

转载于:https://www.cnblogs.com/Hyacinth-Yuan/p/8086716.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
 你手头有一些数据,想做成漂亮的图表放到网站上?好主意,通过浏览器来跨平台实现数据可视化是正确的选择。什么,你还想让图表能够响应用户操作?没问题,交互式图表比静态图片更能吸引人去探究本源。好啦,要生成通过浏览器展示的动态图表,目前热门的Web数据可视化库——D3。   《图灵程序设计丛书·数据可视化实战:使用D3设计交互式图表》这本书很有意思,而且对读者要求不高。不需要知道什么是数据可视化,也不用有太多Web开发背景就能看懂它。不信?翻一翻就知道这是一本既好玩又实用的动手指南啦!看完这本书你会怎么样呢?   掌握必要的HTML、CSS、JavaScript和SVG基础知识;   学会基于数据在网页里生成元素和为它们设置样式的技巧;   能够生成条形图、散点图、饼图、堆叠条形图和力导向图;   使用平滑的过渡动画来展示数据的变化;   赋予图表动态交互能力,响应用户从不同角度探索数据的请求;   收集数据和创建自定义的地图;   另外,《图灵程序设计丛书·数据可视化实战:使用D3设计交互式图表》100多个代码示例都可以在线浏览! 【电子版来自互联网,仅供预览及学习交流 使用,不可用于商业用途,如有版权问题,请联系删除,支持正版,喜欢的 请购买正版书籍: https://e.jd.com/30336473.html】

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值