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