根據(jù)Udacity Data Vis & D3的課程記錄的一些入門練習(xí)偏竟。
d3官方API參考鏈接3.0版本
1- Working in the JS console
- 從chrome里面的審查元素，可以進(jìn)入console界面踊谋，點(diǎn)擊element，可以查看html內(nèi)容殖蚕，點(diǎn)擊console，可以寫js
2-Document Selectors
- 選擇元素的方式：html tag, class, id.
- document.getElementById("idname");
- document.querySelector('.classname');
3- D3 select
如果class如下睦疫，可用下列方式選取
<nav class = "navbar navbar-inverse navbar-static-top">
- d3.select('.navbar');
- d3.select('.navbar-inverse');
- d3.select('.navbar.navbar-inverse');
改變element屬性
d3.select('.main-title').text("GapMinder World: China");
改字體的顏色：
d3.select('#legend').style('fill', 'orange');
4- Nested Selections
當(dāng)代碼如下時(shí)，如果要選img
<a class="navbar-brand logo" id="header-logo" >
</a>
var parent_el = d3.select('.navbar-brand.logo');
這等價(jià)于（選id的時(shí)候蛤育，要在前面寫#）：
var parent_el = d3.select('#header-logo');
接著寫（選擇tag，更改attr的內(nèi)容）：
parent_el.select('img');
parent_el.select('img').attr('src');
parent_el.select('img').attr('src', '/assets/udacity_white.png');
直接使用d3的方法缨伊，合起來(lái)可以寫為（選id，選tag name进宝，改attr）：
d3.select('#header-logo img').attr('alt', 'logo');
5-remove / html method
d3.select('.main').html('');
6-how scales work
- SVG 的x軸向右增加枷恕，y軸向下增加，可認(rèn)為是從畫布的左上角出發(fā)徐块，來(lái)作圖
- e.g.如果柱狀圖，life expectancy胡控，是從15-90歲（圖表來(lái)看是從下向上），那么map到SVG一個(gè)0-250像素長(zhǎng)度的畫布上昼激，15是最下面的位置，所以對(duì)應(yīng)像素為250橙困，90對(duì)應(yīng)0。
- scale有多種類型凡傅，比如上面例子中的linear辟狈，或者算面積時(shí)的sqrt哼转，或者log，等壹蔓。
7-add SVG element
var svg = d3.select('.main').append('svg');
svg.attr('width', 600).attr('height', 300);
針對(duì)視頻中，life expectancy, gdp, population的數(shù)據(jù)庶溶，開始創(chuàng)建scale的對(duì)應(yīng)關(guān)系：
var y = d3.scale.linear().domain([15, 90]).range([250, 0]); #橫軸life軸
var x = d3.scale.log().domain([250, 100000]).range([0, 600]); #縱軸gdp軸
var r = d3.scale.sqrt().domain([52070, 1380000000]).range([10, 50]); #pop半徑
console.log(y(77), x(13330), r(1380000000)); #可以直接算出結(jié)果
svg.append('circle').attr('fill', 'red').attr('r', r(1380000000)).attr('cx', x(13330)).attr('cy', y(77)); #在圖上增加一個(gè)紅色的svg
8- bar chart
講的是Mike的一個(gè)例子
視頻里的圖如下，詳細(xì)的說(shuō)明了以下draw function的作用
