1. 程式人生 > >D3.js中選擇、刪除、插入元素

D3.js中選擇、刪除、插入元素

1、選擇元素
現在有一段html檔案,body中有三個段落元素

    <p>Apple</p>
    <p id="myid" class="myClass">pear</p>
    <p class="myClass">banana</p>
  • 選擇第一個p
    d3.select("body").select("p")
  • 選擇三個p
    d3.select("body").selectAll("p")

  • 選擇第二個p
    d3.select("body").select("#myid").style("color","red")

  • select the second p and third p
    d3.select("body").selectAll(".myClass")

2、insert or append element

  • append() :add elements in the end of election
//add element p in the end of every p
d3.select("body").select("p").
    append("p").text(" the element of appended")
//only add one p in the end of
body
body.append("P").text("add p in the end of body")
  • insert()
body.insert("p").text("insert p in the head of body")

3.remove element

d3.select("body").select("#removeId")
    .remove()