d3画过渡动画
程序员文章站
2024-03-18 13:14:04
...
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.axis path,.axis line{
fill:none;
stroke:black;
shape-rendering:crispEdges;
}
.axis text{
font-family:sans-serif;
font-size:11px;
}
</style>
</head>
<body>
<script type="text/javascript" src = "http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>
<script type="text/javascript">
var width = 600;
var height = 600;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var xScale = d3.scale.linear()
.domain([0,10])
.range([0,300]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var g = svg.append("g")
.attr("class","axis")
.attr("transform","translate(50,200)")
.call(xAxis);
xScale.domain([0,50]);
g.transition()
.duration(2000)
.call(xAxis);
</script>
</body>
</html>运行结果如下图所示：
坐标轴缓慢的进来
还有，下面直接贴代码啦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.axis path,.axis line{
fill:none;
stroke:black;
shape-rendering:crispEdges;
}
.axis text{
font-family:sans-serif;
font-size:11px;
}
</style>
</head>
<body>
<script type="text/javascript" src = "http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>
<script type="text/javascript">
var width = 600;
var height = 600;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var rect = svg.append("rect")
.attr("fill","steelblue")
.attr("x",10)
.attr("y",10)
.attr("width",100)
.attr("height",30)
var rectTran = rect.transition()
.duration(2000)
.attrTween("width",function(d,i,a){
return function(t){
return Number(a) + t * 300;
}
})
var text = svg.append("text")
.attr("fill","white")
.attr("x",100)
.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(2000)
.tween("text",function(){
return function(t){
d3.select(this)
.attr("x",Number(initx) + t * 300)
.text(Math.floor(Number(initText)+ t * 300));
}
})
</script>
</body>
</html>运行结果如下图所示：
矩形会很匀速的变长，而且数字也会跟着匀速变化！