D3.js总体展示篇

最近一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这篇荒漠一筹莫展的自己,幸好发现了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来展示我们想看到的数据效果,如何实现对数据的聚类显示、节点间如何实现网络关系连接、节点属性数据如何显示、各类图形绘制、地图信息如何绘制部署节点等内容敬请期待

时间: 2024-11-05 16:37:31

D3.js总体展示篇的相关文章

D3.js 整体展示篇

近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资料收集 D3.js是一个对数据(主要针对大数据)进行操纵使之实现可视化的JavaScript库. D3可以借助HTML.SVG和CSS等技术将数据展示出来. 通俗点,就是网页制图,生成互动图. 介绍D3的中文书籍如今 仅仅有 <数据可视化实战-使用D3设计交互式图表>,有兴趣大家能够看看 长处:

D3.js 以圆做点绘制力图(一)

SVG是什么? 如何在SVG上绘制一个圆? 如何在SVG上绘制一条线? 力图的基本属性有哪些? 这些问题将由本文来一一解答. 在代码方面,我们沿用上文的网页框架,把body里面的js替换成现在的js即可. SVG SVG,可缩放的矢量图,我们以后所绘制 的数据展示图大都是在SVG这个大容器内完成的,它相当于画布.创建SVG,就是有利于导出.保存绘制好的图形. 简单的SVG标签格式 <svg width="500" height="50"></svg

【d3.js实践教程特别篇】PornHub发布基于d3的网民观看成人视频时长分布交互式地图

学习d3.js(以下都简称d3)也有一段时间了,运行d3做了几个项目.我发现中文的d3教程很少,国外资料多但要求有一定的英文阅读能力(推荐网址:http://bl.ocks.org/mbostock),于是就萌发了写一个d3实际运用系列文章的想法,现在开始付之行动.在系列中,我会用d3+html5 canvas实现一些实际效果(如统计结果展示,地图数据展示等),希望可以跟大家共同学习交流. 代码我公布在git.cschina.com上,大家可以clone到本地运行,地址是:http://git.

包学会之浅入浅出Vue.js:升学篇

上一篇<包学会之浅入浅出Vue.js:开学篇>中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧,Go~ 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上<qui-button></qui-button>或者<qui-nav></qui-nav>这样的代码就可以,是不是很方便呢,接下来我们将要完成以下页面: 这是我们组件库的首页,包含三个子

【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制

什么是桑基图 用D3绘制简单的Sankey图 添加文字 圆形节点 添加交互效果 注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量,人口,经济等的流动情况.最早由爱尔兰人Matthew Henry Phineas Riall Sankey 提出.Sankey是一名船长也是工程师,1898年Sankey在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图,后来被命名为Sankey图,中文音译为桑基图

前端编程提高之旅(八)----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

d3.js学习笔记(1)

很早之前就知道d3,当初看到它的时候,第一反应就是"我去,怎么这么炫酷",但是一直没有学(自己太懒了),最近可能是五月病犯了,不想看书,不想写代码,不想看论文,不想写论文,虽然什么事情都不想做,不过还是找点事情做吧,那就学学d3呗,说不定将来什么时候就用到了呢. 这篇博客主要从源码的角度去学习,所以对于没有接触过d3的朋友,请先看完下面的资料. 学习资料 学习嘛,当然得找到好的资料咯,下面是我昨天看的一些文章,在d3的github上都能够找到,毕竟最好的学习资料就是官网的文档.教程和源

【d3.js实践教程02】基于中国地图的高考一本录取率排行

学习d3.js(以下都简称d3)也有一段时间了,运行d3做了几个项目.我发现中文的d3教程很少,国外资料多但要求有一定的英文阅读能力(推荐网址:http://bl.ocks.org/mbostock),于是就萌发了写一个d3实际运用系列文章的想法,现在开始付之行动.在系列中,我会用d3+html5 canvas实现一些实际效果(如统计结果展示,地图数据展示等),希望可以跟大家共同学习交流. 代码我公布在git.cschina.com上,大家可以clone到本地运行,地址是:http://git.

数据可视化与D3.js

数据可视化 数据可视化是如何把数据更好的展现出来的一个课题,在大数据出现后,它变得更为重要和迫切. 以前使用excel进行柱状图.饼状图.折线图等是最常用的数据可视化手段之一,而在WEB端,使用流行的extjs.fusioncharts.jfreechart,或者相对不太流行的amchart.highcharts.Bootstrap里的charts.jquery的一些插件等等都可以实现饼状图等的展示. 然而我这里说的数据可视化并不是这种传统的.简单的图形,而是更为复杂,能够在有限的空间里展示更多