数据可视化 D3 元素的插入与删除

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_39141486/article/details/102765808

插入元素

插入元素主要有两个函数

  • append():在选择集末尾插入元素
  • insert():在选择集前面插入元素

append( )

    <p id="First">First</p>
    <p id="Second">Second</p>
    <p id="Third">Third</p>
<!-- append() -->
    <script>
        var p = d3.select("body").append("p").text("appden a demo");
    </script>

在这里插入图片描述

insert( )

    <p id="First">First</p>
    <p id="Second">Second</p>
    <p id="Third">Third</p>
<!-- append() -->
    <script>
        var p = d3.select("body").insert("p","#Second").text("insert a demo");
    </script>

在这里插入图片描述

删除元素

  • remove()
    <p id="First">First</p>
    <p id="Second">Second</p>
    <p id="Third">Third</p>
<!-- 删除元素 remove() 指定元素ID即可删除元素 -->
    <script>
        var p = d3.select("#Second").remove();
    </script>

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The Fourth</title>
</head>
<script src="../../JS/d3.min.js"></script>

<body>
<!-- 插入元素、删除元素 -->
<!-- 插入元素涉及的函数有两个
    append():在选择集末尾插入元素 
    insert():在选择集前面插入元素-->
    
    <p id="First">First</p>
    <p id="Second">Second</p>
    <p id="Third">Third</p>
<!-- append() -->
   <!-- <script>
        var p = d3.select("body").append("p").text("appden a demo");
    </script> -->
<!-- insert() -->
   <!-- <script>
        var p = d3.select("body").insert("p","#Second").text("insert a demo");
    </script> -->
<!-- 删除元素 remove() 指定元素ID即可删除元素 -->
    <script>
        var p = d3.select("#Second").remove();
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_39141486/article/details/102765808
今日推荐