D3 学习
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>
经纬度映射
接下来要做的就是如何将经纬度数据映射到地图中，并按照时间的先后顺序链接这些点形成路径，为车辆路径分析做辅助分析使用。。。
参考资料
- 数据可视化实战-by Scott Murray
- http://blog.csdn.net/lzhlzz/article/category/2292565
- http://www.d3js.cn/?p=68
- https://www.dashingd3js.com/table-of-contents
- http://www.ourd3js.com/wordpress/?p=296
D3 学习的更多相关文章
- D3学习笔记一
D3学习笔记一 什么是D3? D3(全称Data Driven Documents)是一个用来做Web数据可视化的JavaScript函数库.D3也称之为D3.js. D3是2011年由Mike Bo ...
- D3学习之地图
D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...
- D3学习之动画和变换
D3学习之动画和变换 ##(17.02.27-02.28) 主要学习到了D3对动画和缓动函数的一些应用,结合前面的选择器.监听事件.自定义插值器等,拓展了动画的效果和样式. 主要内容 单元素动画 多元 ...
- d3学习之路
d3学习历程: 轻量化编译器:HbuiderXHbuiderX使用教程 理解HTMl js CSS 三者关系 学习html js css :1)w3school 2)moo ...
- 【D3】D3学习轨迹-----学习到一定层度了再更新
1. 首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2. 了解d3的专有名词 http://www.cnblogs.com/huxiaoyun90/p ...
- D3学习之：D3.js中的12中地图投影方式
特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...
- D3学习之画布制作
最近大半个月都和d3斗争,学习艰辛(呜呜……)如果觉得作者写的对你有用,可以打赏作者哦!owo 起言:结合自己的学习之路,我认为要想使用d3画图搞清楚布局很重要,层次分明,就给了你很大的灵活性,写起代 ...
- D3学习教程
[ D3.js 入门系列 ] 入门总结 | OUR D3.JS http://www.ourd3js.com/wordpress/?p=396
- D3学习之坐标系绘制
坐标轴的绘制我们需要搞清楚以下三个要点: 1).axis函数 2)..call()函数用于组合 3).坐标轴的平移旋转 关于第三点其实就是"transform","tra ...
随机推荐
- 《Linux内核设计与实现》读书笔记（二）- 内核开发的准备
在尝试内核开发之前,需要对内核有个整体的了解. 主要内容: 获取内核源码 内核源码的结构 编译内核的方法 内核开发的特点 1. 获取内核源码 内核是开源的,所有获取源码特别方便,参照以下的网址,可以通 ...
- Java中Class Type 类类型是怎么回事？
Java中三种方式可以用来表示Class Type(类的实例对象), 第一种,通过隐藏的静态成员变量class来表示:第二种,通过调用该类的对象的getClass方法:第三种,通过Class.forN ...
- eros --- Windows Android真机调试
1.下载并安装JDK 2.下载并安装Android Studio 上面两项不管用weex还是eros都是前置条件,度娘有大量教程. 开始eros 手脚架安装: $ npm i -g eros-cli ...
- hdu3830(lca + 二分)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3830 题意: 有三个点 a, b, c, 对于其中任意一点 x 可以跨过一个点移动到另一个位置, 当 ...
- Node.js 内置模块crypto加密模块(4) Diffie Hellman
Diffie-Hellman( DH ):密钥交换协议/算法 ( Diffie-Hellman Key Exchange/Agreement Algorithm ) 百科摘录: Diffie-Hell ...
- Python中list作为默认参数的陷阱
在Python中,作为默认参数的一定要是不可变对象,如果是可变对象,就会出现问题,稍不注意,就会调入陷阱,尤其是初学者,比如我(┬＿┬). 我们来看一个例子. def add(L=[]): L.app ...
- NAT模式下设置 虚拟机linux(Centos7) 联网
第一步 设置虚拟机网络为NAT模式 第二步 设置虚拟机网络配置 首先执行 cd /etc/sysconfig/network-scripts 之后VI 编辑 ifcfg-ens33(根据实际情况来 基 ...
- 旅行青蛙分析(Android篇)
近期旅行青蛙这款游戏非常的火热,周围的朋友.家人都养了一只小青蛙.看到网上有人说这款游戏可以直接逆向编译,没有加密:所以在搜索相关资料后花了一些时间进行逆向分析与修改.这篇文章里,我将介绍如何获取稀有 ...
- RabbitMQ权限
RabbitMQ 引言 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队 ...
- vi 编辑器的复制
v 进入可视化模式,y 复制选中区域,p粘贴 Ctrl + v 块模式 yy 复制当前行