近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲。我决定在这块宝地贪婪地大餐一番。

本文介绍主要来自官网翻译及用户使用后感想资料收集

D3.js是一个对数据(主要针对大数据)进行操纵使之实现可视化的JavaScript库。

D3可以借助HTML、SVG和CSS等技术将数据展示出来。

通俗点,就是网页制图,生成互动图

介绍D3的中文书籍如今 仅仅有 《数据可视化实战-使用D3设计交互式图表》,有兴趣大家能够看看

长处

与其它js实现制图的方式不同。D3是一个对数据的操作的API.它将数据和网页SVG绑在了一起,当你的数据发生变化时,图表会同步更新。

比方一个数据数组和SVG柱状图中对应y坐标绑定。假设这个数组的元素设为随机变量,定时变化,那么你看到的柱状图也会是不断变化的动态图效果。

除此之外,他能够接受海量数据的可视化显示和动态更新。

D3能够高效操作大数据文档(大多为json格式),支持大数据集的动态交互和动画效果。D3的设计风格同意使用代码反复,在借助不同的插件或组件的情况下。

在github上你能够找到非常多样例,D3的灵活性,它的任意绑定数据和元素,以及美丽的可动性效果展示一定会让你大吃一惊。

使用:

D3的使用。须要引入d3.v3.min.js
或d3.js,你能够到github下载最新的D3 js压缩版本号,也能够通过http链接方式在网页中引入D3

关键代码例如以下:

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

代码里的路径也能够换成你下载d3后的本地 路径。

以下通过对照传统的js写法,对其代码语法使用方法做大体介绍:

Selections(选中对象)

传统写法 document获取对象改变并设置其颜色,这么大一坨代码。。。

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}

使用D3实现上面效果

d3.selectAll("p").style("color", "white");

对,你没有看错,就是这么简单。

     当然。在有必要时,你也能够拿出单个对象对其设置,代码例如以下:

d3.select("body").style("background-color", "black");

dynamic(动态属性)

熟悉DOM框架如jQueryPrototype的朋友们会非常快意识到他们与D3的相似之处。 然而,在D3中样式、属性和其它属性都能够设定为函数的可变数据,而不不过简单的常量。
虽然他们十分的简单性,这些函数但是出奇的强大。

以下边举样例边说明,还是上面的name是p标签的对象操作。如今要让他们随机改变颜色:

d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

让他们依据奇偶变换颜色

d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});

接下来讲讲他对数据的绑定 。上文function传的d值,就是绑定的数据量引用

计算属性经常引用绑定数据。 数据被指定为一个数组的值,每一个值作为第一个參数传递(d)选择功能。
使用默认join-by-index,数据数组中的第一个元素传递给第一个节点的选择,第二个元素到第二个节点,等等。 比如,假设您绑定的数组数据段元素,您能够使用这些数据来计算动态字体大小:

d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });

也可把数组单另拿出来

var data = [4, 8, 15, 16, 23, 42, 12];
d3.selectAll("p")
.data(data)
.style("font-size", function(d) { return d + "px"; });

另外,假设数据量非常大,须要载入文件。以下提供几种载入数据文件的方式:

XML载入

d3.xml('example', 'image/svg+xml', function (error, data) {
if (error) {
console.log('载入SVG文件出错! ', error);
}
else {
// 处理SVG文件
}
});

json载入

d3.json("miserables.json", function(error, graph) {  }

 文件能够不加后缀名。



  上面的代码主要介绍选中对象的属性设置操作,以下,让我们总体看下对象的设置、加入和删除都是怎么做到的

var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(String); // Enter…
p.enter().append("p")
.text(String); // Exit…
p.exit().remove();

在语法上,採用链式写法,对某对象的操作都能够用"."来连接。

基本格式就谈到这里,后文会介绍怎样详细使用D3来展示我们想看到的数据效果。怎样实现对数据的聚类显示、节点间怎样实现网络关系连接、节点属性数据怎样显示、各类图形绘制、地图信息怎样绘制部署节点等内容敬请期待

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWl5dWV4dWVsYW5n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

D3.js 整体展示篇的更多相关文章

  1. ASP.NET+d3.js实现Sqlserver数据库的可视化展示

    效果: 数据库端: 前端展示: 实现原理: 1.在数据段建立两个存储过程 queryUserAnsawer(id) 根据用户ID返回每一题的得分,主要是bcp exe时不能直接在sqlserver中执 ...

  2. 【 D3.js 高级系列 】 总结

    高级系列的教程已经完结,特此总结. 月初的时候曾说过本月内完结高级教程,今天是最后一天,算是可以交差了.O(∩_∩)O~ 如此一来,[入门]-[进阶]-[高级]三个系列的教程算是完成了.本教程的目的在 ...

  3. 【 D3.js 高级系列 — 10.0 】 思维导图

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  4. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  5. 【 D3.js 进阶系列 — 5.0 】 直方图

    直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...

  6. openlayers4 入门开发系列之地图展示篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. 世界各国GDP动态排名可视化实现(基于d3.js)

    一.说明 之前在抖音上看到GDP等各种排名的可视化,一直想知道是怎么实现的.之前也有研究过一次,但觉得太麻烦放弃了,昨天又心痒难耐研究了一翻. 先是看到这篇文章说是有人基于d3.js实现:https: ...

  8. 包学会之浅入浅出Vue.js:结业篇(转)

    蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...

  9. 基于cytoscape.js 、 d3.js实现的关系图谱初级版本

    前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...

随机推荐

  1. Dapper基础知识四之 利用Dapper获取不同类型的主键值

    在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. 一下是Dapper源码几种主键,当主键不包含"ID" ...

  2. TP5 分页类,自定义样式

    结合X-admin 后台框架 在做项目,为了保持分页风格的一致,所以需要自定义 一个分页类. 一.在项目的 extend 目录,创建 cus 目录 二.创建 Page 分页类,代码如下 <?ph ...

  3. 织梦DEDECMS系统中文章内容为空 用SQL语句如何删除?

    织梦后台里提供了清空内容为空的文章,可是发现并不好用,有些空文章还是删除不了,而有些文章不是空的,只是采到了几个字,这些无法清除,于是就手动来清除这个文章.开始是一个一个文章找,一个一个来删除,后来觉 ...

  4. JS脚本代替人工输入

    最近接到了个任务,对某个网页上的1000个item填写相同的text,text的内容相同. 这显然是机械动作呀,干脆写个工具,用脚本代替人工操作. 浏览器按F12,找到console,输入写好的脚本, ...

  5. sudo不用在输入密码

    在任意的路径之下执行:sudo visudo 的命令对文件进行修改: 其中的: sudo ALL=(ALL) %admin ALL=(ALL) 这两个语句为: sudo ALL=(ALL) NOPAS ...

  6. mybatis中 #跟$的区别

    #相当于对数据 加上 双引号,$相当于直接显示数据 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sq ...

  7. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  8. Qt之自定义布局管理器(QFlowLayout)

    简述 QFlowLayout,顾名思义-流布局,实现了处理不同窗口大小的布局.根据应用窗口的宽度来进行控件放置的变化. 具体实现要求不再赘述,请参考前两节内容. 简述 实现 效果 源码 实现 QFlo ...

  9. Qt之QNetworkProxy(网络代理)

    简述 QNetworkProxy类提供了一个网络层代理. QNetworkProxy提供了配置网络层代理支持Qt网络类的方法.目前支持的类有QAbstractSocket.QTcpSocket.QUd ...

  10. JavaScript编写Web脚本最佳实现

    最近在看JavaScript DOM 编程艺术,总结一下JavaScript编写Web脚本的规范与实现,对于实现有以下几点要求: 平稳退化:确保网页在没有JavaScript下也能正常运行 分离Jav ...