D3学习之update、enter、exit

来源：互联网发布：吉利知豆d1和d2的区别编辑：程序博客网时间：2024/05/17 18:46

依旧参考：http://www.ourd3js.com/wordpress/?p=149
由于动画结束的比较早，就继续学了
enter以前看书的时候遇到过解释，这次按照网站示例敲了一遍，记忆更加深刻了
代码版权归原网站所有，本姑娘只是为了记录自己的学习历程，有一些注释是自己加进去的~

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>理解enter和update</title>        <script type="text/javascript" src="../d3/d3.min.js"></script>    </head>    <body>        <p>p1</p>        <p>p2</p>        <p>p3</p>        <script type="text/javascript">        var dataset = [3, 6, 9, 12, 15];        var p = d3.select("body").selectAll("p");        //p选中了body中所有的p标签        //update部分是数据和p标签相对应的部分        //由于数据量大于p标签的个数        //所以要创建p标签        var update = p.data(dataset);        var enter = update.enter();        //enter()占位，给没有对应p标签的数据占位        update.text(function (d) {return "update" + d;})        enter.append("p")             .text(function (d) {return "enter" + d;})             //append()给新创建的为p标签占位的部分标记成p标签        </script>    </body></html>

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>理解update和exit</title>        <script type="text/javascript" src="../d3/d3.min.js"></script>    </head>    <body>        <p>p1</p>        <p>p2</p>        <p>p3</p>        <script type="text/javascript">        var dataset = [3];        var p = d3.select("body").selectAll("p");        var update = p.data(dataset);        var exit = update.exit();        update.text(function (d) {return "update" + d;})        exit.text(function (d) {return "exit";})        </script>    </body></html>

原网站特意强调：
exit主要是为了删除元素，上文这样写让exit对应的部分输出只是为了更加深刻的理解

0 0