[D3.js] 综述

D3.js 是操作基于数据文件的JavaScript库。它使用HTML、SVG和CSS让你的数据基情四射。D3在web标准上着重为你提供现代浏览器的全部功能,而且不需要通过使用你自己专门的框架、结合强大的可视化组件和DOM操作的数据驱动方法。

点击下载最新版(3.5.5):

或者,在页面上引用:

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

使用HTTPS的站点应该使用本机下的D3,或者支持HTTPS的CDN,例如 CDNJS  完整的资源和用例 也可以在GitHub上 下载 。

# 引言

D3允许你将任意的数据绑定到文档对象模型(DOM),然后运用数据驱动转换到文档上。例如,你可以使用D3将一个数组生成一个HTML表格。或者,使用相同的数据来创建一个有平滑过渡和交互的交互式SVG条形图。

D3不是一个旨在提供每一个可能想到的功能的单一框架。相反的,D3所解决的问题的关键是:高效操作基于数据的文档。它提供了显著的灵活性,展现了web标准的全部功能,比如HTML、SVG 和 CSS。D3非常快,它以最小的开销支持大型数据集以及交互与动画的动态行为。D3的函数式风格使代码通过组件插件的多元化集合得以重用。

# 选集(选择器?)

使用W3C DOM API来修改文档是很没劲的:方法名冗长,立即执行方法需要手动迭代和登记临时状态。例如,更改段落的文本颜色:

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");

选择器是W3C Selectors API中定义的一个概念,也受现代浏览器原生支持。SizzlejQuery1.3版以后引进的CSS选择器引擎)为旧版的浏览器提供了向后兼容。上述例子中是通过标签名(分别是“p”和“body”)来选择节点。元素也可以通过各种形式被选择,包括容器,属性值,class 和 id。
D3提供许多方法去操作节点:设置属性或样式;注册事件监听;添加、移除或查找节点;变换HTML或文本内容。这些足以满足绝大部分的需求。直接访问底层的DOM也是可以的,因为D3选择器只是一个简单的节点数组。

# 动态属性
 熟悉 jQuery 或 Prototype 的读者应该马上能意识到D3的相似之处。然而,样式、属性和其他特性在D3中都被认做是数据的方法,而不只是简单的常量。尽管它们表面上看起来很简单,但这些方法却非常强大。例如d3.geo.path这个方法可以将地理坐标工程化为SVG的路径数据。D3提供很多内置可重复使用的方法和方法工厂,比如面积图、折线图、饼图等图的 图像元
例如,给段落随机添加颜色:

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";
});

计算属性往往涉及到数据绑定。数据被约定为一个数组,这些值会作为第一个参数(d)传到方法里面。通过默认的按索引加入,数组里的第一个元素会被传给选择器里的第一个节点,第二个元素传给第二个节点,以此类推。举个栗子,将一个数组绑定到段落元素,用这些数据来给段落动态地渲染字体大小:

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

一旦数据被绑定到文档上,你就可以省去了对数据的操作;D3将会自动检索之前绑定的数据。这样你就不需要重新绑定然后再去计算属性了。

# Enter & Exit

使用D3的 enter 和 exit,可以为传入的数据创建新节点以及移除一些不再需要了的节点。

当数据绑定到选择器上时,每个数据元素将会与选择器里的相应节点配对。如果节点比数据少,使用enter来append节点,那些多出来的数据就可以作为它的参数。例如:

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

数据操作的默认结果是更新节点。因此,如果没有enter和exit,则只是自动选择那些与已有节点匹配的元素。data操作符返回的是三个部分(虚拟选集):enter, updata, exit.

====================== P.S. 分割线 begin =========================

PS:关于selections 的一篇美文

enter选集:对所有缺失的元素以占位符placeholder替代。

update选集:包含现有的元素,并绑定到数据

剩下的元素最终都会出现在exit选集中,并被移除。

===================== P.S. 分割线 end ===========================

// Update…
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使你能够根据数据去变换文档,其中包括创建和删除元素。它可以通过响应用户交互、一段时间内的动画或者第三方的异步通知来改变已有的文档。在服务端将文档初始渲染好,然后在客户端通过D3去更新它,这种混合的方法通常也是ok的。

# 转换(Transformation)而不是表示( Representation)

D3不是一个新的图形表示库。不像ProcessingRaphaël, 或者 Protovis,D3的标记词汇都是直接来自web标准:HTML、SVG 和 CSS。比如说,你可以用D3来创建一个SVG元素然后用外部的层叠样式表来渲染它。你可以使用综合的过滤效果,dashed strokes 和 clipping。假设将来浏览器厂商推出了新的功能,你就能马上使用它们——不需要更新工具包。而且,如果你以后要使用D3以外的工具包,你也已经形成了这些标准的知识。

最厉害的是,D3可以简便地用浏览器的审查元素来调试:那些你用D3操作的节点实际上也是浏览器本身已知道的节点。

# Transitions

D3在变换上的重点自然延伸到了过渡动画。过渡是随时间逐渐插补一些样式和属性。渐变动画可以通过easing方法来控制效果,例如“elastic”, “cubic-in-out” 和 “linear”。D3的插补器既支持原语,例如数字还有字符串中的数字(字体大小,路径数据,等),也支持复合值。甚至你可以自己拓展D3插补器的注册表去支持复杂的属性和数据结构。

例,将页面背景褪化为黑色:

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

Or,有延迟地调整一个圆的大小:

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

实际上D3仅通过修改属性,减少了开销,并且能够处理高帧速的大型复杂图形。D3也可以通过事件处理完成一系列复杂的过渡。而且,你还能使用css3过渡;D3不会替代浏览器的工具箱,但会让它使用起来更为简便。

====================== 终于翻译完毕之分割线 ==========================

原文 :

欲知后事如何,且听下回分解

时间: 2024-10-10 17:11:33

[D3.js] 综述的相关文章

d3.js学习

画svg图像 1.添加svg元素 2.添加g元素,g元素是一个分组的元素,相当于html中的div元素 3.画图像 4.画坐标轴 ----------------------------------------------------------------------------- d3画闲线性曲线例子 html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理方法通常是使用append()添加元素.请看下面的代码: <body> <p></p> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p

Learning D3.js d3的path讲解

转帖: http://jsbin.com/omajal/23/edit?html,output svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等.W3 标准对SVG 的Path定义如下SVG路径代表一个形状的轮廓,可以描边,填充,用作剪切路径,或任何三者的结合.W3提供了一个形象的比喻,用钢笔和纸来表示svg的path* 想象一个钢笔放在一张纸上.* 钢笔在某点与纸接触.* 笔尖移动到另一处.* 这两个

【 D3.js 入门系列 — 11 】 入门总结

D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少

【 D3.js 进阶系列 — 6.0 】 拖拽的应用(Drag)

拖拽(Drag)是交互式中很重要的一种,本文将讲解拖拽的使用方法. 1. drag的定义 D3中可用 d3.behavior.drag() 来定义 drag 行为. var drag = d3.behavior.drag() .on("drag", dragmove); function dragmove(d) { d3.select(this) .attr("cx", d.cx = d3.event.x ) .attr("cy", d.cy =

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

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

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

d3.js学习1

官网: http://d3js.org/ 范例: https://github.com/mbostock/d3/wiki/Gallery 引用: //在线引用 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> //或下载到本地 <head> <meta charset="utf-8"> <title>