D3.js:动态效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D3.js:动态效果相关的知识,希望对你有一定的参考价值。

D3 提供了 4 个方法用于实现图形的过渡:

- transition()

启动过渡效果,其前后是图形变化前后的状态(形状、位置、颜色等等),例如:

.attr("fill","red")         //初始颜色为红色
.transition()               //启动过渡
.attr("fill","blue")       //终止颜色为蓝色

D3 会自动对两种颜色(红色和蓝色)之间的颜色值(RGB值)进行插值计算,得到过渡用的颜色值。

- duration()

指定过渡的持续时间,单位为毫秒。

如 duration(2000) ,指持续 2000 毫秒,即 2 秒。

- ease()

指定过渡的方式,常用的有:

  • linear:普通的线性变化
  • circle:慢慢地到达变换的最终状态
  • elastic:带有弹跳的到达最终状态
  • bounce:在最终状态处弹跳几次

调用时,格式形如: ease("bounce")。

- delay()

指定延迟的时间,表示一定时间后才开始转变,单位同样为毫秒。此函数可以对整体指定延迟,也可以对个别指定延迟。

例如,对整体指定时:

.transition()
.duration(1000)
.delay(500)

  如此,图形整体在延迟 500 毫秒后发生变化,变化的时长为 1000 毫秒。因此,过渡的总时长为1500毫秒。

又如,对一个一个的图形(图形上绑定了数据)进行指定时:

.transition()
.duration(1000)
.delay(funtion(d,i){
    return 200*i;
})

  如此,假设有 10 个元素,那么第 1 个元素延迟 0 毫秒(因为 i = 0),第 2 个元素延迟 200 毫秒,第 3 个延迟 400 毫秒,依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。

1. 实现简单的动态效果

下面将在 SVG 画布里添加三个圆,圆出现之后,立即启动过渡效果。

//画布大小
var width = 500, height = 500;

// 在body里添加一个SVG画布
var svg = d3.select("body")
    .append("svg")
    .attr("width",width)
    .attr("height",height);

- 第一个圆,要求移动 x 坐标

var circle1 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 45)
        .style("fill","green");

//在1秒(1000毫秒)内将圆心坐标由100变为300
circle1.transition()
    .duration(1000)
    .attr("cx", 300);

- 第二个圆,要求既移动 x 坐标,又改变颜色

var circle2 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 45)
        .style("fill","green");

//在1.5秒(1500毫秒)内将圆心坐标由100变为300,
//将颜色从绿色变为红色
circle2.transition()
    .duration(1500)
    .attr("cx", 300)
    .style("fill","red");

- 第三个圆,要求既移动 x 坐标,又改变颜色,还改变半径

var circle3 = svg.append("circle")
    .attr("cx",100)
    .attr("cy",100)
    .attr("r",45)
    .style("fill","green");

//在2秒(2000毫秒)内将圆心坐标由100变为300
//将颜色从绿色变为红色
//将半径从45变成25
//过渡方式采用bounce(在终点处弹跳几次)
circle3.transition()
    .duration(2000)
    .ease("bounce")
    .attr("cx", 300)
    .attr("r", 25)
    .style("fill","red");

以上是关于D3.js:动态效果的主要内容,如果未能解决你的问题,请参考以下文章

前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果

D3.js 入门系列 --- 6 如何让图表动起来

html D3byEX 9.6:甜甜圈片段(改编自D3.js v4)

怎么用d3.js 制作3d效果

d3.js——给柱形图添加事件出现的问题总结

d3.js:饼图布局 - 调整角度以创建快门效果