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返回匹配的全部项。app

• 选第一个元素

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

• 选指定的某个元素

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

链式调用

var newP = d3.select("body").selectAll("p").text("在这里改变body内全部p标签的内容")；code

改变样式与绑定数据

• 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;
  })ip

• function(d,i)

d:绑定的数据值
i:选择集元素的索引值 从0开始element

增删元素

• append()//在选择集的末尾添加元素

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

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

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

• remove()

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