可视化实验2——用D3做图表
D3相对来Echarts来说，是比较难的。因为Echarts有专门的各种图表的模板，到时候只要在代码中添加某个图表，然后修改数据内容即可。但是D3则所有的东西都得是自己写，坐标轴啦、图表啦等都得自己画。但这也体现了D3的充分可创造性，没有做不到，只有想不到。。。
不过有一点要注意，若使用到json地图数据的话，得用火狐浏览器打开才行，其它的不支持。。。
1 学习D3
首先是安装D3，参见D3的安装
下面提供几个网站链接：
D3.js的官网（英文）
D3.js API中文手册 (虽说是中文，但也只是用中文大概介绍了函数的功能，链接的网页还是官网的英文。。。)
Our D3.js 中文教程网站
官网上有推荐的几个学习D3的博客，不过除了上面一个，其余都是英文的，给个链接吧，英语大神的话可以看看，见网页中的blog栏目：
D3.js教程
2 实验目的
就是利用全国人口普查的数据（人口、GDP、人均GDP），用适当的图表展现出来。我主要做了3个，一个是地图（是耗费我最大时间精力的图表，不过也在这中间学到了很多，具体原因后面会说），二是柱形图（参见Our D3.js 中文教程网站 中的柱形图讲解），三是散点图（参见Our D3.js 中文教程网站 中的作品集demo）
3 地图+柱形图实现
地图的用法见Our D3.js 中文教程网站中的学习教程，如何在地图上加上柱形图的话，我主要是参考D3官网中的一个example，要注册登陆才能查看源代码，请见
Medical Cost of Hip Replacement by State
但是该demo不能直接copy下来就可以，只能在网页上参考。。。所以费了我很大精力去研究它。
下面是我遇到的一些问题。
3.1如何将柱形图显示在地图上：
原本：柱形显示在地图下的代码
svg.selectAll("path")
.data
demo的：
g.append("g")
.attr("id", "states")
.selectAll("path")
.data
看见了没，参考的demo是用的g.append("g").selectAll("path")，所以才将柱形图显示在地图上面,而不是直接svg.selectAll("path")
3.2如何存储centroid的值一遍后来方便获取？
先定义个数组
var p_centroid={}
然后，如下面代码。
g.append("g")
.selectAll("path")
.data( root.features )
.enter()
.append("path")
.attr("d", path )
.attr("stroke","#000")
.attr("stroke-width",1)
.attr("fill", function(d,i){
return color(i);
})
//增添中心
.attr("centroid", function(d) {
var centroid = path.centroid(d);
p_centroid[d.properties.name]=centroid;
//用下面的代码调试出来T^T的...一开始输出d.name，没有内容。。。后来改为d.properties,为[Object Object]，恍然大悟
//var body = d3.select("body");
//var new_h1 = body.select("h1");
//new_h1.text(d.properties.name);
})
这里遇到了个比较大的问题，那就是如何存储各省份的中心坐标centroid值。
本来想用省份的名称作为索引，但一开始的时候怎么都不行。后来想了一个debug的办法（没办法， 用notepad++写html，又不能debug，只能一个一个试），那就是在html中增加一个
<h1>This is debug <h1>//用于显示文本
然后在function中输入下面几行code（即上面代码中注视的部分）
var body = d3.select("body");
var new_h1 = body.select("h1");
new_h1.text(d.properties.name);
一开始的时候，尝试输出d.name，结果刷新网页后什么都没有显示。后来参照地图json文件，输出d.properties，发现内容是[Object Object]。这下恍然大悟，改成d.properties.name，出现了省份的名字！然后就用d.properties.name作为索引了
4 截图和代码
这里附上几张截图吧，另外附上代码的下载地址：
