D3 学习笔记

D3简介

D3全称是Data-Driven Documents数据驱动文档，是一个开源的javascript库，可以用于数据可视化图形的创建，但不仅仅只是这些。可以查看d3帮助文档还有样例演示。

安装D3

  1. 从github上面fork最新版本d3文件，地址在D3源文件。

  2. 引用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>

  3. 配置web服务器

    d3很多地方使用异步加载的方式，需要从后台服务器取回数据。我们可以采用apache服务器，或者采用python终端配置方案。二者都很简单实。采用python实现的话，只需要切换到项目所在的文件夹，然后再终端执行如下命令即可构建一个简单的web服务器进程。

    ptyhon -m SimpleHTTPServer 8888 &

    其中8888为指定端口，也可单独选择其他端口 末尾的&表示作为后台进程执行，终端关闭之后服务器进程而不会关闭。

  4. 显示数据

    <!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>

  5. 控制台查看

数据绑定

上面我们会看到 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>

经纬度映射

接下来要做的就是如何将经纬度数据映射到地图中，并按照时间的先后顺序链接这些点形成路径，为车辆路径分析做辅助分析使用。。。

参考资料

D3 学习的更多相关文章

  1. D3学习笔记一

    D3学习笔记一 什么是D3? D3(全称Data Driven Documents)是一个用来做Web数据可视化的JavaScript函数库.D3也称之为D3.js. D3是2011年由Mike Bo ...

  2. D3学习之地图

    D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...

  3. D3学习之动画和变换

    D3学习之动画和变换 ##(17.02.27-02.28) 主要学习到了D3对动画和缓动函数的一些应用,结合前面的选择器.监听事件.自定义插值器等,拓展了动画的效果和样式. 主要内容 单元素动画 多元 ...

  4. d3学习之路

    d3学习历程: 轻量化编译器:HbuiderXHbuiderX使用教程   理解HTMl js CSS 三者关系   学习html js css :1)w3school           2)moo ...

  5. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  6. D3学习之：D3.js中的12中地图投影方式

    特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...

  7. D3学习之画布制作

    最近大半个月都和d3斗争,学习艰辛(呜呜……)如果觉得作者写的对你有用,可以打赏作者哦!owo 起言:结合自己的学习之路,我认为要想使用d3画图搞清楚布局很重要,层次分明,就给了你很大的灵活性,写起代 ...

  8. D3学习教程

    [ D3.js 入门系列 ] 入门总结 | OUR D3.JS http://www.ourd3js.com/wordpress/?p=396

  9. D3学习之坐标系绘制

    坐标轴的绘制我们需要搞清楚以下三个要点: 1).axis函数 2)..call()函数用于组合 3).坐标轴的平移旋转 关于第三点其实就是"transform","tra ...

随机推荐

  1. Gson应用：利用map和list来拼装Json消息

    import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; i ...

  2. Solr 6.1学习笔记 -- spellcheck 组件

    <searchComponent name="spellcheck" class="solr.SpellCheckComponent"> <s ...

  3. 洛谷P1314 聪明的质监员

    P1314 聪明的质监员 题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: ...

  4. iPhone摄影中的深度捕捉(WWDC2017-Session 507)

    507是深度媒体相关的概念层面的内容.主要为下面4个部分: Depth and disparity on iPhone 7 Plus Streaming depth data from the cam ...

  5. [APIO2019T1]奇怪装置

    考古学家发现古代文明留下了一种奇怪的装置.该装置包含两个屏幕,分别显示两个整数x和y.经过研究,科学家对该装置得出了一个结论:该装置是一个特殊的时钟,它从过去的某个时间点开始测量经过的时刻数t,但该装 ...

  6. [题解]（优先队列广搜）POJ_3635_Full Tank

    用二元组$(city,fuel)$即可记录所有状态,以当前花费为关键字优先队列,开数组记录直接做即可 有一个点在于每次不用枚举所有的加油数量,只需要加一即可,因为如果在加一升更优的话又会扩展出加更多油 ...

  7. JSON长度

    import com.jayway.jsonpath.JsonPath; import com.jayway.jsonpath.Predicate; import net.minidev.json.J ...

  8. POJ1031 Fence

    题目来源:http://poj.org/problem?id=1031 题目大意: 有一个光源位于(0,0)处,一个多边形的围墙.围墙是“全黑”的,不透光也不反射光.距光源r处的光强度为I0=k/r, ...

  9. rsyslog服务器同步其他服务器上面应用日志（如mysql审计日志 、nginx日志）

    **环境说明**系统:ubuntu 14.04 (CentOS可以参考http://www.cnblogs.com/hanyifeng/p/5463338.html) rsyslog版本 :8.16. ...

  10. angularJs1.x 版本中 uib-tabset 如何默认激活不同的标签页

     <uib-tabset> 默认有个active属性,根据官方文档,active的默认值是0,也就是说,默认显示索引为0的标签页,可以通过修改这个值来默认显示不同的索引的标签页. 示例: ...