d3.js入门

安装/准备

将文件引入html。一般放在body中，在所有内容下面。

<script type="text/javascript" src="js/d3.js"></script>

开始使用

首先，了解基本的API以便于完成更深入复杂的任务。

1.选择元素

• select  只能选中一个元素，如果有多个同样标签或者类名的元素最终会返回第一个元素；
• selectAll  可以选中所有同样标签和类名的元素。
• 选择整个文档中的元素 d3.select("")，选择部分则用声明的变量名如下：nav.selectAll("");

<script>
  var nav = d3.select("nav");//选择单个元素
  var nav_link = nav.selectAll("li"); //选择全部元素
</script>

2.改变样式

<script>
 element.style("color","#fff");//改变颜色
 element.style({'stroke': 'black', 'stroke-width': 2})
</script>

3.改变属性

<script>
 element.attr("display","none");//改变display
 element.property("checked","checked")//input[type="checkbox"]的checked属性
</script>

比较容易理解的 attribute与property区别

4.改变class

• 可以设置true或者false选择添加或删除类。

<script>
  element.classed(".nav","true");
</script>

5.设置或修改文本

<script>
  element.text("tyw36");
</script>

6.设置或修改内容

<script>
  element.html("<p>ssh</p>");
</script>

7.插入移除元素

• append  在选中元素后添加新元素；
• insert  在选中元素前添加新元素；
• remove  移除元素。

<script>
  element.append("");//在选中元素后追加
  element.insert("div",":first-child");//在选中元素中添加子节点div，添加位置为第一个
  element.insert("div");//在选中元素中添加子节点div，添加位置为最后一个
  element.enter().insert("div");//在选中元素前添加节点div，添加位置前一个兄弟元素
  element.remove("");//移除元素
</script>

8.数据操作

• data  声明数组传入数据或直接传入数组

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(function(d,i) { return d; });

var data=[4,8,15,16,23,42]

d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .text(function(d,i) { return d; });

注意：使用  function(d){ return d;} 会是乱序。

• enter 选择元素占位
• 元素不存在时，顺序：选择元素select()----设置数据data()----元素占位enter()----添加元素append()----设置文本text()
• 元素存在时，顺序：选择元素select()----设置数据data()----设置文本text()

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];
var tr = d3.select("body").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr");

var td = tr.selectAll("td")
    .data(function(d,i) { return d; })
  .enter().append("td")
    .text(function(d,i) { return d; });

• exit  删除退出元素。数组a=[1,2,3,4,5]，数组b=[3,4,5,6,7]。使用上面的方法设置元素将数组a的数据传入，如果此时需要将数组b的元素传入就可以使用element.exit().remove()删除a数组中与b数组不重叠的1、2。

var a=[1,2,3,4,5]
var b=[3,4,5,6,7]

d3.select("body").selectAll("div")
    .data(a)
  .enter().append("div")
    .text(function(d,i) { return d; });
d3.select("body").selectAll("div")
    .data(b,function(d,i){return d;})
   .exit().remove()

• filter  过滤选择

var odds = selection.filter(":nth-child(even)");

:nth-child是从1开始，第一个元素是1；filter内含的顺序i是从0开始，第一个元素是0。