d3.js 动态图表

Cc_2011 发布于2019-08-23 16:45 / 2920人阅读

摘要：使用创建动态图表主要使用到了部分的，通过他们可以完成动画我的学习记录是通过一个例子了解这些会动的柱状图还是拿之前的例子，代码在此完整的柱图修改的代码部分在于创建处原来的代码加上动画效果后代码如下动画开始前状态返回持续时间，是的动画函数，

d3js v5.9.2
使用d3创建动态图表主要使用到了d3.trasition部分的API，通过他们可以完成动画
我的学习记录是通过一个例子了解这些API

会动的柱状图

还是拿之前的例子，代码在此：完整的柱图

修改的代码部分在于创建rect处：

//原来的代码
barContainer.append("rect")
    .attr("height", d => barScale(d))
    .attr("width", barWidth - 1);

加上动画效果后代码如下

barContainer.append("rect")
    .attr("height", 0) //动画开始前状态
    .attr("width", barWidth - 1)
    .transition() //selection.transition() 返回transition
    .duration(1000)//持续时间
    .ease(d3.easeBackInOut)//transition.ease(easing function)，easing function是d3的动画函数，还有很多其他api
    .attr("height", d => barScale(d));//transition.attr()

？？是从上向下绘制的
这里我们可以用rect的y属性控制动画，y表示矩形左上角端点的纵坐标

barContainer.append("rect")
    .attr("height", 0)
    .attr("width", barWidth - 1)
    .attr("y", d => barScale(d)) //y是相对rect父级的g容器的，顶端从底部开始，故值设为矩形的高
    .transition()
    .duration(2000)
    .ease(d3.easeBackInOut)
    .attr("height", d => barScale(d))
    .attr("y", 0);//到g容器顶部

所以过程就是矩形长度向下拉伸，同时位置上移

这样子就完成了动画

更简洁的写法

上面的写法是最简单的写法，但是代码太长或者同一个动画效果多次使用就会很冗杂，我们可通过d3.transition()获得自定义的transition
使用也很简单

//定义transition
let t = d3.transition()
    .duration(2000)
    .ease(d3.easeBackInOut);
barContainer.append("rect")
    .attr("height", 0)
    .attr("width", barWidth - 1)
    .attr("y", d => barScale(d))
    .transition(t) //使用新定义的transition
    .ease(d3.easeBackInOut)
    .attr("height", d => barScale(d))
    .attr("y", 0);

效果相同

总结

d3还提供了其他常用的API，除了用到的ease()，duration()还有delay()等等
代码在这（d3库在build里）

参考资料

第九章让图表动起来
SVG 图像入门教程——阮一峰
selection.transition()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103237.html

常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
声明式与响应式——前端新一代数据可视化方案

摘要：数据可视化图表图表作为数据可视化最常见的表现形式之一，往往被以偏概全的认为图表就是数据可视化。严格来说，数据可视化应该是连接数据与视觉的一个映射关系，将数据映射成人更容易感知其规律的可视化结果。题目中的新一代是个相对的概念，事实上本文即将介绍的方法已经有了生产环境可用的实现方案（这也侧面佐证了其可行性），但考虑到此方法与现在大部分前端项目中所使用的数据可视化方案相比仍有一些优势，因此...

xuhong 2019-08-20 12:34 评论0 收藏0
d3数据绑定与selection实践

摘要：本篇的使用的版本为将按照简要介绍实验及意义进行简要通过数据绑定创建，更新及销毁元素，如何操作元素则是通过。本篇blog的使用的d3版本为d3.js v5.9.2 将按照简要介绍、实验及意义进行简要 d3.js通过data join（数据绑定）创建，更新及销毁元素，如何操作元素则是通过selection。总结如下 showImg(https://segmentfault.com/...

Tangpj 2019-08-26 13:38 评论0 收藏0
注释！注释！(1) - Area Chart

摘要：我的目标是，注释个的例子。这两句都是和相关的，所以放在一起讲。区域的意思是，对于一个，和之间的部分表示此覆盖的区域。是一个数组的辅助函数，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。我的目标是，注释100个d3.js的例子。可能是史上最详细的。 Area Chart是Basic Charts里的第一个例子。解析 1 var margin = {top...

Java3y 2019-08-19 17:57 评论0 收藏0
使用D3.js构建实时图形

摘要：在本教程中，我们将探讨如何使用和构建实时图形。通过方法监听轮询更新，并在收到更新后使用最新数据调用函数，以便重新呈现图形。首先你需要在计算机上安装Node和npm。数据的可视化表示是传递复杂信息的最有效手段之一，D3.js提供了创建这些数据可视化的强大工具和灵活性。 D3.js是一个JavaScript库，用于使用SVG，HTML和CSS在Web浏览器中生成动态的交互式数据可视化。...

Ryan_Li 2019-08-23 11:31 评论0 收藏0