《d3.js可视化实战手册》笔记
官网：
http://d3js.org/
范例：
https://github.com/mbostock/d3/wiki/Gallery
引用：
//在线引用 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> //或下载到本地 <head> <meta charset="utf-8"> <title>D3.js galance</title> <script src="d3.min.js"></script> </head>
开始：
<body>
<p id='target'></p>
<script type="text/javascript">
d3.select("p#target").text("Hello World!");
</script>
</body>
d3.select实现单个元素选取
select.attr，读取/设置元素属性
<p id='target'></p>
<script type="text/javascript">
var res=d3.select("p#target").attr("id");
document.write(res);
</script>
//结果为target
<p></p>
<script type="text/javascript">
d3.select("p").attr("id","p1");
var res=d3.select("p").attr("id");
document.write(res);
</script>
//将p的id设为p1，并输出p的id
select.classed，添加/删除元素类
<p class="p1"></p>
<script type="text/javascript">
var res=d3.select("p").classed("p1");
document.write(res);
</script>
//检测该元素是否属于p1类，返回布尔值
<p></p>
<script type="text/javascript">
var res=d3.select("p").classed("p1",true);
</script>
//为P标签添加p1这个类
<p class="p1"></p>
<script type="text/javascript">
d3.select("p").classed("p1",function(){return false;});
var res=d3.select("p").classed("p1");
document.write(res);
</script>
//为P标签移除p1这个类
select.style，样式选择器
<p></p> <script type="text/javascript"> var res=d3.select("p").style("font-size"); document.write(res); </script> //输出p style的字号
<p></p>
<script type="text/javascript">
var res=d3.select("p").style("font-size","16px");
document.write(res);
</script>
//设定字号为16
select.text，选择或设置文本内容
<p>be my valentine</p>
<script type="text/javascript">
var res=d3.select("p").text();
document.write(res);
</script>
//选择文本内容
<p>be my valentine</p>
<script type="text/javascript">
d3.select("p").text("be my darling");
var res=d3.select("p").text();
document.write(res);
</script>
//将原来的替换为新的
select.html，选择或更改元素内的html
<p>be my valentine</p>
<script type="text/javascript">
var res=d3.select("p").html();
document.write(res);
</script>
//获取p元素内容
<p>be my valentine</p>
<script type="text/javascript">
d3.select("p").html("<b>be my darling</b>");
var res=d3.select("p").html();
document.write(res);
</script>
//设置标签中html的内容
多元素选择器
<div>div1</div></br>
<div>div2</div></br>
<div>div3</div></br>
<script type="text/javascript">
d3.selectAll("div").style("border","2px solid blue");
</script>
多元素路由迭代选集（选取子元素）selectAll().each(function(d,i){//do sth})
<div></div></br>
<div></div></br>
<div></div></br>
<script type="text/javascript">
d3.selectAll("div")
.style("border","2px solid blue")
.each(function(d,i){
d3.select(this).append("h1").text(i);
})
</script>
each方法包括两个可选参数d & i，以及一个隐含参数this, this指向当前DOM引用的元素，d表示当前元素数据绑定，i表示索引值，0开始，递增1.