D3.js：动态效果

时间：2022-05-06 21:20:59

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");

相关文章