D3学习记录之简单动画

最新推荐文章于 2024-07-16 14:24:12 发布

一只从零开始学习的小蜗牛

最新推荐文章于 2024-07-16 14:24:12 发布

阅读量699

点赞数

分类专栏： D3 文章标签： d3

本文链接：https://blog.csdn.net/zkyrjsxdm/article/details/50394579

版权

D3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

之前看《数据可视化实战：使用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

收藏

觉得还不错? 一键收藏
0
评论
D3学习记录之简单动画

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

扫一扫

专栏目录