D3学习记录之简单动画

来源：互联网发布：文华编程简明教程编辑：程序博客网时间：2024/06/07 18:41

之前看《数据可视化实战：使用D3设计交互式图表》的时候实现过动画，动画入门部分比较简单，基本上一气呵成，没有什么太大难度，代码练习仍然是参照：
http://www.ourd3js.com/wordpress/?p=127
版权归原网站，本姑娘敲出来是为了学习和记录啦~

代码一：三个小圆圈的故事

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>D3:Circle Transition</title>        <script type="text/javascript" src="../d3/d3.min.js"></script>    </head>    <body>        <script type="text/javascript">        var height = 400,            width = 400;        var svg = d3.select("body")                    .append("svg")                    .attr("height", height)                    .attr("width", width);        var circle1 = svg.append("circle")                         .attr("cx", 100)                         .attr("cy", 100)                         .attr("r", 45)                         .style("fill","green");        circle1.transition()               .duration(1000)               .attr("cx", 300);        var circle2 = svg.append("circle")                         .attr("cx", 100)                         .attr("cy", 200)                         .attr("r", 45)                         .style("fill", "green");        circle2.transition()               .duration(1500)               .attr("cx",300)               .style("fill", "red");        var circle3 = svg.append("circle")                         .attr("cx", 100)                         .attr("cy", 300)                         .attr("r", 45)                         .style("fill", "green");        circle3.transition()               .duration(2000)               .ease("bounce")               .attr("r", 15)               .attr("cx", 300)               .style("fill","red");        </script>    </body></html>

代码二：让上一次画的柱状图动起来~

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>D3:reveiw</title>        <style type="text/css">        .axis line,        .axis path {            fill:none;            stroke:black;            shape-rendering:crispEdges;        }        .axis text {            font-family: sans-serif;            font-size: 11px;        }        .Myrect {            fill:steelblue;        }        .MyText {            fill:white;            font-size: 11px;            text-anchor:middle;        }        </style>        <script type="text/javascript" src="../d3/d3.min.js"></script>    </head>    <body>        <script type="text/javascript">        var height = 400,            width = 400;        var svg = d3.select("body")                    .append("svg")                    .attr("height", height)                    .attr("width", width);        var dataset = [6, 18, 39, 77, 20, 43];        var padding = {top:20, bottom:20, left:30, right:30};        var xScale = d3.scale.ordinal()                       .domain(d3.range(dataset.length))                       .rangeRoundBands([0, width - padding.left - padding.right]);        var yScale = d3.scale.linear()                       .domain([0, d3.max(dataset, function (d) {return d;})])                       .range([height - padding.top - padding.bottom,0]);        //创建坐标轴,用svg        var xAxis = d3.svg.axis()                      .scale(xScale)                      .orient("bottom");        var yAxis = d3.svg.axis()                      .scale(yScale)                      .orient("left");        var rectPadding = 6;        //创建矩形元素        var rects = svg.selectAll(".Myrect")                       .data(dataset)                       .enter()                       .append("rect")                       .attr("class", "Myrect")                       .attr("transform","translate(" + padding.left + "," + padding.top + ")")                       .attr("x", function (d, i) {return xScale(i) + rectPadding / 2;})                       .attr("y", function (d) {                        return yScale(0);                       })                       .attr("height", function (d) {return 0;})                       .attr("width", xScale.rangeBand() - rectPadding);                       //rangeBand()        //创建矩形的动画        rects.transition()             .delay(function (d,i) {return i * 250;})             .duration(2500)             .ease("bounce")             .attr("y", function (d) {return yScale(d);})             .attr("height", function (d) {return height - padding.top - padding.bottom - yScale(d);})        var texts = svg.selectAll(".MyText")                       .data(dataset)                       .enter()                       .append("text")                       .attr("class","MyText")                       .attr("transform", "translate(" + padding.left + "," + padding.top + ")")                       .attr("x",function (d,i) {return xScale(i) + rectPadding / 2;})                       .attr("y", function (d) {return yScale(0);})                       .attr("dx", (xScale.rangeBand() - rectPadding) / 2)                       .attr("dy",15)                       .text(function (d) {return d;})        texts.transition()             .delay(function (d,i) {return i * 250;})             .duration(2500)             .ease("bounce")             .attr("y", function (d) {return yScale(d);});        svg.append("g")           .attr("class","axis")           .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")           .call(xAxis);        svg.append("g")           .attr("class", "axis")           .attr("transform", "translate(" + padding.left + "," + padding.top + ")")           .call(yAxis);        </script>    </body></html>

动画真是太棒了，让图表一下子生动起来~

0 0