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

    xiaoxiao2021-04-16  29

    我们还可以根据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>

    转载请注明原文地址: https://ju.6miu.com/read-673072.html

    最新回复(0)