装置

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();