#d3js# 初見d3.js

常用鏈接

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

[2] d3例子缴渊,很豐富。

[3] d3文檔鱼炒,有各種語言的衔沼,太棒。

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市鸽粉,隨后出現(xiàn)的幾起案子斜脂,更是在濱河造成了極大的恐慌,老刑警劉巖触机,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帚戳,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡儡首,警方通過查閱死者的電腦和手機(jī)片任,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蔬胯,“玉大人蚂踊,你說我怎么就攤上這事”仕蓿” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵棱诱,是天一觀的道長泼橘。 經(jīng)常有香客問我,道長迈勋,這世上最難降的妖魔是什么炬灭? 我笑而不...
    開封第一講書人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮靡菇,結(jié)果婚禮上重归,老公的妹妹穿的比我還像新娘米愿。我一直安慰自己,他們只是感情好鼻吮,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開白布育苟。 她就那樣靜靜地躺著,像睡著了一般椎木。 火紅的嫁衣襯著肌膚如雪违柏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評(píng)論 1 309
  • 那天香椎,我揣著相機(jī)與錄音漱竖,去河邊找鬼。 笑死畜伐,一個(gè)胖子當(dāng)著我的面吹牛馍惹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播玛界,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼万矾,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了脚仔?” 一聲冷哼從身側(cè)響起勤众,我...
    開封第一講書人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鲤脏,沒想到半個(gè)月后们颜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡猎醇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年窥突,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片硫嘶。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡阻问,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沦疾,到底是詐尸還是另有隱情称近,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布哮塞,位于F島的核電站刨秆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏忆畅。R本人自食惡果不足惜衡未,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧缓醋,春花似錦如失、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至葫督,卻和暖如春竭鞍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背橄镜。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來泰國打工偎快, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人洽胶。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓晒夹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親姊氓。 傳聞我的和親對(duì)象是個(gè)殘疾皇子丐怯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容