D3.js 动态数据刷新视图详解

本文探讨了如何使用D3.js进行动态数据刷新视图,对比了简单但不友好的直接删除并重新绘制元素的方法与利用enter/exit更新视图的正确方法。通过理解enter和exit的作用,详细介绍了数据与视图绑定原理,并针对数据变化时的视图更新步骤给出指导。同时,文章解答了关于数据删除时视图为何会混乱的问题,强调了正确理解和使用data()的重要性。
摘要由CSDN通过智能技术生成

在官网有着丰富demo的基础上,使用d3绘制一副静态图表并不是难事。但我们更多的需求是:根据用户操作动态获取数据库中数据,进而刷新视图。

最生硬的方法:删除element,重新绘制;
d3.select('#svgID').remove();   //删除整个SVG
d3.select('#svgID')
  .selectAll('*')
  .remove();                    //清空SVG中的内容

此方法的确可以做到刷新视图的效果。
优点:快准狠!
缺点:
1. 不能实现友好的动画切换效果
2. 不能保留之前用户操作的状态

正确打开方式:利用enter/exit更新视图

先理解enter/exit 二者的作用

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值