d3.js选择、插入、删除元素
生活随笔
收集整理的這篇文章主要介紹了
d3.js选择、插入、删除元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們還可以根據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>總結
以上是生活随笔為你收集整理的d3.js选择、插入、删除元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： d3.js中选择元素和绑定数据
- 下一篇： 简单易用的baidutemplate模板