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