d3.js选择、插入、删除元素

最新推荐文章于 2021-09-22 16:25:51 发布

Soyoger

最新推荐文章于 2021-09-22 16:25:51 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript+前端开发

本文链接：https://blog.csdn.net/qq_36330643/article/details/70169893

JavaScript+前端开发专栏收录该内容

54 篇文章

订阅专栏

本文介绍了如何使用D3.js库进行DOM元素的选择、样式设置、插入及删除操作。通过实例展示了如何根据ID和类名选择元素并改变其颜色、字体大小等样式，以及如何在文档中插入和移除元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们还可以根据dom属性id class进行元素选择。

var p2 = body.select("#myid");
p2.style("color","red");

var p = body.selectAll(".myclass");
p.style("color","red");

插入元素

插入元素涉及的函数有两个：

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

删除元素

删除一个元素时，对于选择的元素，使用 remove 即可，例如：

var p = body.select("#myid");
p.remove();

如此即可删除指定 id 的段落元素。

下面我们用一个demo说明：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../libs/d3.min.js" charset="utf-8"></script>
</head>
<body>
<p id="myid">Apple</p>
<p class="pClass">Pear</p>
<p class="pClass">Banana</p>
</body>
</html>

</body>
</html>

<script>
    var body = d3.select("body");
   var p1 = body.select("#myid");
    p1.style("color","red");

    var p23 = body.selectAll(".pClass");
    p23.style("font-size","72px").style("color","blue");


    /*
    插入元素涉及的函数有两个：
    append()：在选择集末尾插入元素
    insert()：在选择集前面插入元素
    */

    body.append("p")
            .text("append p element1").style("color","yellow");

    body.insert("p","#myid")
            .text("insert p element");

    var p = body.select(".pClass");
    p.remove();

</script>