#d3js# 初见d3.js

常用链接

[1] d3官网主页，但是东西不多，因为主要都以github形式为主。

[2] d3例子，很丰富。

[3] d3文档，有各种语言的，太棒。

[4]...教程太多...慢慢看

浏览器支持

Firefox、Chrome、Safari、Opera和IE9+支持。

IE8 : 兼容性库Aight。

最低运行要支持：JavaScript和W3C DOM API。

转场特效：SVG和CSS3。

所以，d3并不是一个做兼容的层，兼容的话要自己做呢。

第一个例子

图1 d3js的第一个例子

如上图：比如我们有这样一组数据

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

要生成这样的图表，我们可以这样：

      d3.select(".chart") 

         .selectAll("div")

         .data(data) 

         .enter()

         .append("div") 

         .style("width", function(d) {return d * 10 + "px";})

         .text(function(d) {return d;});```

我们来简单分析下上面所用到的方法：

|   方法      |    介绍    |
|--------|--------|
|`d3.select(selector)`  `d3.select(node)`|选择第一个匹配的元素，可以是字符串，也可以是一个节点，比如 *d3.select(this)* 、*document.body*。|
|`d3.selectAll(selector)` `d3.selectAll(node)` |选择所有可以匹配的元素，可以是字符串，也可以是一个节点。|
|`selection.data([values[, key]])` |在特定selection中加入数组数据，这个数据既可以是一组数组，也可以是返回数据的函数方法。这里数据与DOM的[绑定关系[链接生成中...]]()下次再说。|
|`selection.enter()` | 返回enter的selection，用于要对selection定义更新时。比如，当要对selection定义*append*,*insert*, *select*和*call*操作更改内容前，必须先用此方法实例化selection|
|`selection.append(name)`|在当前selection最后添加一个新的元素，类似jquery用法，不做赘述|
|`selection.style(name[, value[, priority]])`|设置CSS属性，类似jquery，不做赘述|
|`selection.text([value])`|设置selection文本属性，类似jquery，不做赘述|

别忘了上点样式：

.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}```