常用鏈接

[1] d3官網(wǎng)主頁(yè)，但是東西不多，因?yàn)橹饕家詆ithub形式為主。

[2] d3例子，很豐富。

[3] d3文檔，有各種語(yǔ)言的，太棒。

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

瀏覽器支持

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

IE8 : 兼容性庫(kù)Aight。

最低運(yùn)行要支持：JavaScript和W3C DOM API。

轉(zhuǎn)場(chǎng)特效：SVG和CSS3。

所以，d3并不是一個(gè)做兼容的層，兼容的話(huà)要自己做呢。

第一個(gè)例子

圖1 d3js的第一個(gè)例子

如上圖：比如我們有這樣一組數(shù)據(jù)

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;});```

我們來(lái)簡(jiǎn)單分析下上面所用到的方法：

|   方法      |    介紹    |
|--------|--------|
|`d3.select(selector)`  `d3.select(node)`|選擇第一個(gè)匹配的元素，可以是字符串，也可以是一個(gè)節(jié)點(diǎn)，比如 *d3.select(this)* 、*document.body*。|
|`d3.selectAll(selector)` `d3.selectAll(node)` |選擇所有可以匹配的元素，可以是字符串，也可以是一個(gè)節(jié)點(diǎn)。|
|`selection.data([values[, key]])` |在特定selection中加入數(shù)組數(shù)據(jù)，這個(gè)數(shù)據(jù)既可以是一組數(shù)組，也可以是返回?cái)?shù)據(jù)的函數(shù)方法。這里數(shù)據(jù)與DOM的[綁定關(guān)系[鏈接生成中...]]()下次再說(shuō)。|
|`selection.enter()` | 返回enter的selection，用于要對(duì)selection定義更新時(shí)。比如，當(dāng)要對(duì)selection定義*append*,*insert*, *select*和*call*操作更改內(nèi)容前，必須先用此方法實(shí)例化selection|
|`selection.append(name)`|在當(dāng)前selection最后添加一個(gè)新的元素，類(lèi)似jquery用法，不做贅述|
|`selection.style(name[, value[, priority]])`|設(shè)置CSS屬性，類(lèi)似jquery，不做贅述|
|`selection.text([value])`|設(shè)置selection文本屬性，類(lèi)似jquery，不做贅述|

別忘了上點(diǎn)樣式：

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