常用鏈接
[1] d3官網(wǎng)主頁抗悍,但是東西不多,因?yàn)橹饕家詆ithub形式為主钳枕。
[4]...教程太多...慢慢看
瀏覽器支持
Firefox昔瞧、Chrome指蚁、Safari、Opera和IE9+支持自晰。
IE8 : 兼容性庫Aight凝化。
最低運(yùn)行要支持:JavaScript和W3C DOM API。
轉(zhuǎn)場(chǎng)特效:SVG和CSS3酬荞。
所以搓劫,d3并不是一個(gè)做兼容的層,兼容的話要自己做呢混巧。
第一個(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;});```
我們來簡單分析下上面所用到的方法:
| 方法 | 介紹 |
|--------|--------|
|`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)系[鏈接生成中...]]()下次再說滔迈。|
|`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è)新的元素,類似jquery用法谈山,不做贅述|
|`selection.style(name[, value[, priority]])`|設(shè)置CSS屬性俄删,類似jquery,不做贅述|
|`selection.text([value])`|設(shè)置selection文本屬性奏路,類似jquery畴椰,不做贅述|
別忘了上點(diǎn)樣式:
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}```