D3-入门小练习-1

根据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">
          ![](./assets/udacity.svg)
        </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的作用