d3入門基礎知識

安裝

d3.js就是一個js的庫，不需要安裝，可下載文件或直接引用網絡鏈接。 <script src="http://d3js.org/d3.v3.min.js"></script>

示例

<p class=“firstElement”>first p</p>
<p class="secondElement">second p</p>
<p class="myclass">third p</p>

選擇集

select()，selectAll() 與原生js中的querySelector querySelectorAll用法類似，select返回匹配的第一項，selectAll返回匹配的所有項。

• 選第一個元素

d3.select("body").select("p")

• 選指定的某個元素

d3.select("body").select(".secondElement") //class加. id加#

鏈式調用

var newP = d3.select("body").selectAll("p").text("在這裏改變body內所有p標籤的內容")；

改變樣式與綁定數據

• datum()

var p =d3.select("body").selectAll("p");

var str="123456";
p.datum(str);//綁定數據
p.text(function(d,i){
    return `第${i}個元素綁定的數據是${d}`;
})

• data()

  var p =d3.select("body").selectAll("p");
  var arr=[1,2,3];
  p.data(arr);
  p.text(function(d,i){
  return d;
  })

• function(d,i)

d:綁定的數據值
i:選擇集元素的索引值 從0開始

增刪元素

• append()//在選擇集的末尾添加元素

d3.select("body").append("p").text("this is new append element")

• insert(name,[before])//在指定元素之前添加元素

d3.select("body").insert("p", ".secondElement").text("this is new insert element");

• remove()

var newElement=d3.select("body").insert("p", ".secondElement").text("this is new insert element");
newElement.remove();