D3 学习笔记
D3简介
D3全称是Data-Driven Documents数据驱动文档，是一个开源的javascript库，可以用于数据可视化图形的创建，但不仅仅只是这些。可以查看d3帮助文档还有样例演示。
安装D3
-
从github上面fork最新版本d3文件，地址在D3源文件。
-
引用d3.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3/d3.js"></script> </head> <body> <div>this is a test for d3</div> <script type="text/javascript"> # we can write code in here... </script> </body> </html> -
配置web服务器
d3很多地方使用异步加载的方式，需要从后台服务器取回数据。我们可以采用apache服务器，或者采用python终端配置方案。二者都很简单实。采用python实现的话，只需要切换到项目所在的文件夹，然后再终端执行如下命令即可构建一个简单的web服务器进程。
ptyhon -m SimpleHTTPServer 8888 &
其中8888为指定端口，也可单独选择其他端口 末尾的&表示作为后台进程执行，终端关闭之后服务器进程而不会关闭。 -
显示数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3/d3.js"></script> </head> <body> <div>this is a test for d3</div> <script type="text/javascript"> var dataset; //声明全局变量 // test for d3 select function d3.select("body") .append("p") .text("this is a append paragraph"); // csv read and we will print the data to console d3.csv("test.csv",function(error,data){ //callback function if(error){ console.log(error); }else{ dataset=data; //复制到全局变量 console.log(data); } }); //read json d3.json("testjson.json",function(json){ console.log("hello"); console.log(json); }); </script> </body> </html> -
控制台查看
数据绑定
上面我们会看到 d3.select("body").append("p").text("this is a append paragraph");这么一段，是d3的连缀方法，类似于设计模式中的责任链模式，将处理完后的工作交给责任链条中的下一个环节进行继续处理。
绑定数据：参考如下代码
var dataset=[1,8,5,62,1,23,454,22];
// test for d3 select function
d3.select("body")
.selectAll("div")
.data(dataset)
.enter()
.append("div")
.style("color",function(d){
if(d>5){
return "red";
}else{
return "black";
}
})
.text(function (d){
//匿名回调函数 对每个数据执行一次同样的方法 把数据返回给前台
return d;
});
具体研究d3责任链的过程，先是选择dom节点body，然后选择所有p标签，此时还没有这个标签，于是返回空元素，可以理解为马上创建这个段落（p标签）,在然后的data（dataset）解析并取出数据值，此后的所有方法均会针对每个值执行一次，enter表示创建并绑定新的元素，相当于把数据绑定到了p标签上然后交给下一个方法进行处理，接下来就比较明白了。
关于匿名函数的问题,在d3的使用中遇到了很多的匿名函数，就是系统会自动返回一个对应的值给被调用的对象，这个对象接收到这个值之后可以进行相应的处理，比如上面的d参数，实际上是每个元素的值，绑定之后以这种方式返回并以匿名函数的方式显示到text中，另外针对多个值的变量，这里面维护了一个索引值i，我们可以通过这个i来定位当前操作的是哪一个元素。如下所示,其中的i为数组下标索引。
<script type="text/javascript">
var dataset=[1,3,5,7,9]
var w=960;
var h=325;
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var circles=svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx",function(d,i){
return (i*125)+25;
})
.attr("cy",h/2)
.attr("r",function(d){
return d*6;
});
</script>
路径绘制
效果图
需要进行数据的处理，预处理成Geojson格式。
原始数据可以从Natural Earth下载.地图数据制作方法可以参照中国地图GeoJson制作方法。
源代码(其中china.json在这里)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test fro SVG</title>
<script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
var w=1000;
var h=1000;
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var projection = d3.geo.mercator()
.center([107, 31])
.scale(850)
.translate([w/2, h/2]);
var path = d3.geo.path().projection(projection);
var color = d3.scale.category20();
d3.json("china.json",function(error,json){
if(error){
console.log(error);
}
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d",path)
.attr("stroke","#000")
.attr("stroke-width",1)
.attr("fill", function(d,i){
return color(i);
})
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill",color(i));
});
//console.log(json);
});
console.log("hello json");
</script>
</body>
</html>
经纬度映射
接下来要做的就是如何将经纬度数据映射到地图中，并按照时间的先后顺序链接这些点形成路径，为车辆路径分析做辅助分析使用。。。