根据Udacity Data Vis & D3的课程记录的一些入门练习。
d3官方API参考链接3.0版本
1- Working in the JS console
- 从chrome里面的审查元素，可以进入console界面，点击element，可以查看html内容，点击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
当代码如下时，如果要选img
<a class="navbar-brand logo" id="header-logo" href="https://classroom.udacity.com">
</a>
var parent_el = d3.select('.navbar-brand.logo');
这等价于（选id的时候，要在前面写#）：
var parent_el = d3.select('#header-logo');
接着写（选择tag，更改attr的内容）：
parent_el.select('img');
parent_el.select('img').attr('src');
parent_el.select('img').attr('src', '/assets/udacity_white.png');
直接使用d3的方法，合起来可以写为（选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轴向下增加，可认为是从画布的左上角出发，来作图
- e.g.如果柱状图，life expectancy，是从15-90岁（图表来看是从下向上），那么map到SVG一个0-250像素长度的画布上，15是最下面的位置，所以对应像素为250，90对应0。
- scale有多种类型，比如上面例子中的linear，或者算面积时的sqrt，或者log，等。
7-add SVG element
var svg = d3.select('.main').append('svg');
svg.attr('width', 600).attr('height', 300);
针对视频中，life expectancy, gdp, population的数据，开始创建scale的对应关系：
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)); #可以直接算出结果
svg.append('circle').attr('fill', 'red').attr('r', r(1380000000)).attr('cx', x(13330)).attr('cy', y(77)); #在图上增加一个红色的svg
8- bar chart
讲的是Mike的一个例子
视频里的图如下，详细的说明了以下draw function的作用
