梦入琼楼寒有月，行过石树冻无烟

D3 transition

2022-04-21

过渡（excessive），主要用于进行视觉效果的交互，让原有生动的数据变得更加活跃，通常在前端图标中较为应用，而其学术图标仅针对静态数据的展示效果。

transition

在 d3 中创建过度主要需要通过d3.transition以及 selection.transition，他们都可以返回一个过度的效果，他们两个的区别在于d3.transtion主要用于直接创建一个对象，然后在指定一个作用对象，而selection.transtion是通过作用对象创建过渡，简单的就是一个是选择集对象，而另一个就是过度对象：

ID DA FA
d3.transition([选择],[名称]) 创建一个过度对象
transition.delay([延迟]) 设置一个过度的延迟时间，单位是ms (默认的延迟时间为 0ms)
transtion.duration([持续时间]) 设置过度的持续时间，单位是ms （默认的持续时间为250ms）
transtion.ease() 创建一个过度的样式
linear 线性缓动
polynomial 多项式缓动
quadratic 二次缓动
cubic 三次缓动
sinusoidal 正弦缓动
exponential 指数缓动
back 回缩后冲击终点
circular 环形缓动
circular 缓动效果
elastic 震荡缓动，就像是类似于震荡的橡皮筋一样
bounce 弹跳缓动，像是一个橡皮球一样

创建

d3.transition

在下述的 code 中我们主要使用d3.transtion方法来进行添加一个过渡效果，通过使用过渡效果可以将宽度为100的矩形过渡为宽度500且效果非常的丝滑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var padding = {
    width: 800,
    height: 800
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height",padding.height)


svg.append("rect")
    .attr("fill","blue")
    .attr("x",10)
    .attr("y",10)
    .attr("width",100)
    .attr("height",30)
    .transition()
    .attr("width",500)

selection.transition


在上图中，我们通过使用selection.transtion即选择集对象来实现过渡的delay、duration、ease即延迟、持续时间以及震荡过渡样式等效果的实现，需要注意的是 transition可以被多次的调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var padding = {
    width: 800,
    height: 800
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height",padding.height)


var rect = svg.append("rect")
    .attr("fill","blue")
    .attr("x",10)
    .attr("y",10)
    .attr("width",100)
    .attr("height",30)

/*
    /- 选择了 rect 函数，从而创建一个过度对象
    /-- 设置延迟时间 @delay 为 1000，即 1s
    /-- 设置持续时间 @duration 为 10s
    /-- 指定过度样式 @ease 为 elastic即震荡缓动
*/
var rectTran = rect.transition()
    .delay(1000)
    .duration(10000)
    .ease("elastic")
    .attr("width",500)

属性


通常为了满足部分开发者的变态心里，D3 为此提供了图表的过度属性，主要有两个，分别我为transition.attr以及transition.attrTween两个过度效果，通常transition.attr最为常用，而transition.attrTween则是可以手动设置插值函数，虽然他属性变化的中间值是默认插值函数计算，但通过使用transition.attrTween则可以手动设置插值函数：

ID DA FA
transition.attr(name,value) 将属性name过度到目标值
transition.attrTween(name,tween) 将name使用插值函数tween进行过度
linear-in 按照正方向运动
linear-out 按照反向运动
linear-in-out 前半段用正方向运动，后半段有那个反方向运动
linear-out-in 前半段用反方向运动，后半段用正方向运动 (除了linear过渡样式可用之外，也可以用于其他的过渡样式)

transition.attr

在下述的 code 中，我们通过使用selection.transtion即选择集对象来实现过渡的delay、duration、ease即延迟、持续时间以及震荡过渡样式等效果的实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var padding = {
    width: 800,
    height: 800
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height",padding.height)


var rect = svg.append("rect")
    .attr("fill","blue")
    .attr("x",10)
    .attr("y",10)
    .attr("width",100)
    .attr("height",30)

/*
    /- 选择了 rect 函数，从而创建一个过度对象
    /-- 设置延迟时间 @delay 为 1000，即 1s
    /-- 设置持续时间 @duration 为 10s
    /-- 指定过度样式 @ease 为 elastic即震荡缓动
*/
var rectTran = rect.transition()
    .delay(1000)
    .duration(10000)
    .ease("elastic")
    .attr("width",500)

transition.attrTween

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* 基本 svg 数据 */
var padding = {
    width: 900,
    height: 900
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height",padding.height)

/* 矩形与函数过度 */
var rect = svg.append("rect")
    .attr("fill","blue")
    .attr("x",10)
    .attr("y",10)
    .attr("width",100)
    .attr("height",30)

var rectTran = rect.transition()
    .duration(1500)
    .attrTween("width",
        function(d, i, a) {
            return function(t) {
                return Number(a) + t * 500;
            }
        })
    .ease("elastic-in-out")
    .attr("fill","red")

/* 文字与文字过度 */
var text = svg.append("text")
    .attr("fill","blue")
    .attr("x",150)
    .attr("y",10)
    .attr("dy","1.2em")
    .attr("text-anchor","end")
    .text(100)

var initx = text.attr("x")
var initText = text.text()

var textTran = text.transition()
    .duration(1500)
    .tween("text", function() {
        return function(t) {
            d3.select(this)
                .attr("x",Number(initx) + t * 500)
                .text(Math.floor(Number(initText) + t * 500))
        }
    })
    .ease("elastic-in-out")
    .attr("fill","red")

在上述 code 中 ：

1
2
3
4
5
6
.attrTween("width",
    function(d, i, a) {
        return function(t) {
            return Number(a) + t * 500;
        }
    })

其中我们使用了attrTween来手动设置中间值默认的插值函数，function (d,i,a分别代表数据、索引、属性等三种信息，其中a是width是一个初始值。而return function(t)所返回的t则是插值函数，他的范围是0,1，分别代表了开始、结束，所以当t处于0时，function(t)返回100，但是当t返回1时，function(t)将会返回500来表述过渡结束。

axis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 基本 svg 样式 */
var padding = {
    width: 800,
    height: 800
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height",padding.height)

/* 线性比例尺 */
var xScale = d3.scale.linear()
    .domain([0,100])
    .range([0,500])

/* 坐标轴 */
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")

/* 添加方法 g 绑定 xAxis 坐标轴 */
var g = svg.append("g")
    .attr("class","axis")
    .attr("transform","translate(50,400)")
    .call(xAxis)

/* 添加过渡 */
xScale.domain([0,10])
g.transition()
    .duration(2000)
    .call(xAxis)
⬅️ Go back