交互式数据可视化－D3.js（五）过渡

张红新发布于2019-08-02 11:53 / 2467人阅读

摘要：设置过渡属性会对每个选中的元素进行调用，并依次传入当前绑定元素的数据设置过渡样式设置样式插值过渡开始时将文本设置为值将属性按照插值进行过渡。和都是用此函数实现的在使用过渡时是对于选择集自身的元素来说的，选择集的子元素不受影响。

过渡

过渡效果的起始状态和目标状态都很明确，指定之后元素会从起始状态过渡为目标状态。初始化一个过渡效果，有如下几个方法：
var tran = d3.transition() - 创建一个过渡对象

tran.delay() - 设置延时时间，过渡经过一段时间后才会开始

tran.duration() - 设定过渡的持续时间

tran.ease() - 设定过渡的样式。

tran.attr() - 设置过渡属性

tran.attrTween(name[, factory]) - factory会对每个选中的元素进行调用，并依次传入当前绑定元素的数据

tran.style() - 设置过渡样式;

tran.styleTween() - 设置样式插值

tran.text("value") - 过渡开始时将文本设置为value值

tran.tween(name[, factory]) - 将属性name按照factory插值进行过渡。attrTween和styleTween都是用此函数实现的

在使用过渡时是对于选择集自身的元素来说的，选择集的子元素不受影响。如要使用子元素需要使用d3的选择集，

tran.select() - 符合选择器的第一个子元素进行过渡

tran.selectAll() - 符合选择器的所有子元素进行过渡

tran.filter() - 过滤器与selection.filter()类似

tran.each(function) - 为过渡中的每个选中的元素调用指定的 function, 等价于 selection.each。

大致是使用方法如下：

var dataset = [100, 100, 100]
var svg = d3.select("#transition").append("svg").attr("width", 400).attr("height", 300);
var g = svg.append("g")
var drawRect = g.selectAll("rect").data(dataset).enter().append("rect")
drawRect.attr("fill", "#333").attr("x", 10).attr("y", function(d, i){
    return (i * 35) + 10
}).attr("width", 100).attr("height", 30);
var rectTran = g.transition().select("rect").delay(500).duration(1000).attr("width", 300)

云服务器私有云 d3.js数据可视化实战大数据可视化 d3.js d3.js数据可视化实战手册交互式数据可视化

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

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

交互式数据可视化－D3.js（五）过渡

摘要：设置过渡属性会对每个选中的元素进行调用，并依次传入当前绑定元素的数据设置过渡样式设置样式插值过渡开始时将文本设置为值将属性按照插值进行过渡。和都是用此函数实现的在使用过渡时是对于选择集自身的元素来说的，选择集的子元素不受影响。过渡过渡效果的起始状态和目标状态都很明确，指定之后元素会从起始状态过渡为目标状态。初始化一个过渡效果，有如下几个方法：var tran = d3.transi...

URLOS 2019-08-23 12:44 评论0 收藏0
声明式与响应式——前端新一代数据可视化方案

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

xuhong 2019-08-20 12:34 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

terasum 2019-08-02 11:51 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

dreambei 2019-08-29 17:08 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

archieyang 2019-08-23 12:36 评论0 收藏0