d3创建动画

效果图

点击每一项进行颜色的切换：红色和黑色
在这里插入图片描述

example2-8.ftl页面

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="../js/d3.js"></script>
    <title>响应用户事件的动画-示例2-8</title>
</head>
<body onload="makeDemo28()">


</body>

<script>
    function makeDemo28() {
     
     
        // 定义数据集
        var data = ["第一项", "第二项", "第三项", "第四项"];
        // 将HTML<body>元素作为最外层容器。
        d3.select("body")
            // 插入一个<ul>元素，为列表项创建一个空占位符（使用selectAll（"li"））
            .append("ul").selectAll("li")
            // 数据集绑定到选择集，并且检索尚未匹配到的DOM元素
            .data(data).enter()
            // 根据数据集为每个数据点添加列表项和内容
            .append("li").text(d => d)
            // on()函数为指定的事件类型注册回调函数（本例中为"click"），并将当前元素作为DOM Event Target。现在每个列表项都可以接收单击事件，并将它们传递给提供的回调函数
            .on("click", function () {
     
     
                // 我们需要分别跟踪每个列表项的当前切换状态。那么其元素本身就是最好的监听对象。第一次调用回调（指对每个列表项）时尚未分配toggleState。因此，它的值为undefined，转换为布尔值就是false，因此无须设置初始变化量。
                this.taggleState = !this.taggleState;
                // 为使其能够通过链式调用方法进行操作，当前节点需要封装为选择集。
                d3.select(this)
                    // transition()方法在所选元素的当前状态和最终期望外观之间进行补间值的平滑转换。转换间隔为2000毫秒。D3可以通过（以数值形式表现）颜色和其他量化属性之间插入补间值。
                    .transition().duration(2000)
                    // 根据状态变量的当前值设置新的文本颜色
                    .style("color", this.taggleState ? "red" : "black");

            });
    }
</script>
</html>

源码地址：https://github.com/lee58/d3/tree/master

效果图

example2-8.ftl页面

猜你喜欢