D3 Update,Enter,Exit

最新推荐文章于 2025-04-09 11:43:20 发布

原创最新推荐文章于 2025-04-09 11:43:20 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#可视化

D3 专栏收录该内容

29 篇文章

订阅专栏

这里写图片描述

enter

<html>
    <body>
        <p>1</p>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
        var dataset = [ 1 , 2 , 3 , 4 , 5 ];
        var p = d3.select("body").selectAll("p");
        var update = p.data(dataset);
        var enter = update.enter();//获取enter部分
        update.text(function(d){
            return "update " + d;
        });//update部分的处理：更新
        enter.append("p") // 添加p标签直到和数组对齐
            .text(function(d){
                return "enter " + d;
            });//enter部分的处理：添加元素后赋予属性值
        </script>
    </body>
</html>

exit

<html>
    <body>
        <p>1</p>
        <p>2</p>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
            var dataset = [ 0 ];
            var p = d3.select("body").selectAll("p");//选择body中的p元素
            var update = p.data(dataset);//获取update部分
            var exit = update.exit();//获取exit部分
            update.text(function(d){
                return "update " + d;
            });//update部分的处理：更新属性值
            //exit部分的处理：修改p元素的属性
            exit.text(function(d){
                    return "exit";
                });
            // exit.remove();//exit部分的处理通常是删除元素
        </script>
    </body>
</html>