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. 【mybatis-记录】

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  2. mysql中数据库与数据表编码格式的查看、创建及修改

    一.查看数据库编码格式 ? 1 mysql> show variables like 'character_set_database'; 二.查看数据表的编码格式 ? 1 mysql> s ...

  3. elasticsearch 基本介绍

    1. Elasticsearch的适用场景: (1)类似百度百科的全文检索,高亮,搜索推荐(2)新闻类的搜索,用户行为日志(点击,浏览,收藏,评论)+社交网络数据(对某某新闻的相关看法),数据分析,给 ...

  4. 前端三部曲之Css-- 1(常见的居中方式)

    下面来介绍一下web端页面最常见的居中方式 页面的基本结构:一个简单的div <!DOCTYPE html> <html lang="en"> <he ...

  5. linux文件查找find

    一.locate locate基于数据库索引来查找文件,数据库在开机时一段时间对更新,不会实时更新,数据库存放在(/var/lib/mlocate/mlocate.db),可以用updatedb来手动 ...

  6. k8s yaml文件详解

    1.yaml格式的Pod配置文件内容及注解 深入Pod之前,首先我们来了解下Pod的yaml整体文件内容及功能注解. 如下: # yaml格式的pod定义文件完整内容: apiVersion: v1 ...

  7. maven-jar-plugin 使用maven生成可执行的jar包install a test-jar in maven

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  8. spring boot中ConditionalOnClass为什么没有classNotFound类加载异常

    查看原码时有很多飘红的地方, 这些import都失败的地方, 为什么在运行时没有报错? 首先这些@Configuration类没有被程序中的类引用到 其次即使引用到这个类,不一定引用到类中的具体某个方 ...

  9. python模块之time方法详细介绍

    >>> import time >>> dir(time) ['_STRUCT_TM_ITEMS', '__doc__', '__loader__', '__nam ...

  10. 机器学习框架ML.NET学习笔记【2】入门之二元分类

    一.准备样本 接上一篇文章提到的问题:根据一个人的身高.体重来判断一个人的身材是否很好.但我手上没有样本数据,只能伪造一批数据了,伪造的数据比较标准,用来学习还是蛮合适的. 下面是我用来伪造数据的代码 ...