牛逼的js--就是d3.js

d3.js官网：http://d3js.org/

接触d3.js是因为leader让我研究它并运用到新项目开发中去，所以就花时间了解了一下。写下此文来和大家分享学习，如有不足，欢迎指正。

首先，说下我对d3.js的理解。

d3其实就是一个框架，就像是juery一样，封装一些功能。

d3全称：Data-Driven Documents,是一个JavaScript库,用于操纵基于数据的文档。D3帮助你通过使用HTML、SVG和CSS给数据带来活力。D3强调web标准，给你提供现代浏览器的各种能力，而不是把你束缚在专有的框架中,结合强大的可视化组件和数据驱动方式的DOM操作。

下载最新版本：d3.v3.zip

或者,直接链接到最新版本,复制这个代码片段:

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

1.介绍　　 LEARN MORE

　 D3允许您绑定任意数据到一个文档对象模型(DOM),然后采用数据驱动转换成文档。例如,您可以使用D3把一个数字数组生成一个HTML表。或者,使用相同的数据通过平稳的过渡和交互，创建一个交互式SVG条形图。　　　　

D3不是旨在提供功能的单一框架。相反,D3解决了问题的症结所在:有效的基于数据操纵文档，展现了web标准(如HTML5和CSS3,SVG）的完整功能。D3用最快的速度，最小的开销,支持大型数据集、动态行为交互和动画。D3通过整合不同的组件和插件，允许代码重用。

2.选择(Selections) LEARN MORE Selections

传统的修改文件的方法很乏味:方法名冗长,命令需要手动迭代，记住临时状态等。例如,改变文本颜色的段落元素:

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

选择器支持本地的现代浏览器,向后兼容老式浏览器可以通过 Sizzle。上面的示例选择节点的标签名称(分别为“p”和“body”)。可以使用包括容器、属性值、类和ID来作为选择元素。　　　　

D3提供了许多方法来改变节点:设置属性，注册事件侦听器，添加、移除或排序节点，改变HTML或文本内容。直接访问底层DOM也是可能的,因为每个D3只是选择一组节点。

3.动态属性（Dynamic Properties）

读者若是熟悉其他DOM框架，如jquery，应该能很快发现与D3的相似性。然而，在D3中样式、属性和其他参数都可以被指定为函数的数据，而不仅仅是简单的常量。D3提供了很多内置的可重用函数和函数工厂,如绘制图形（ graphical primitives）、线和饼图。这点很像HTML5的一些新特性。

例如,给段落随机赋予颜色:

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

计算属性经常涉及数据绑定。data被定义为一个数组的值,每个值作为第一个参数传递(d)来选择函数（对D3来说d是一个很重要的参数）。通过默认索引,数据中的第一个数组元素传递到第一个节点的选择,第二个元素到第二个节点,等等。例如,如果给段落元素绑定一组数,您可以使用这些数据来计算动态字体大小:

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

一旦数据被绑定到文档,就可以省去数据操作，D3将检索以前绑定的数据，这允许你可以再计算属性而不需要重新连接。

4.输入和输出(Enter and Exit) LEARN MORE Enter and Exit

使用D3的输入和输出的选择,您不再需要创建新的节点来输入数据和删除外溢节点。当选择数据绑定时,则数组中的每个元素与选择的节点对应。如果节点比数据少,则额外的数据元素形成输入选择,您可以通过附加输入选择进行实例化。例如:

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

更新节点是默认操作数据选择的结果。因此,如果你忘记了输入和输出的选择,将自动选择存在对应数据的元素。

初始化选择分成三个部分:修改更新节点,添加输入节点和删除输出节点。

// 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允许你改变一个现有的文档以响应用户交互、超时动画,甚至来自第三方的一个异步通知。

5. 过渡(Transitions)

过渡随着时间逐渐插入styles 和 attributes ，可以通过像“elastic”,“cubic-in-out”,“linear”等功能来控制渐变。

例如，渐变背景色为黑色。

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

又或者，在一个符号图中通过交错延迟来调整圆的大小。

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

牛逼的js--就是d3.js相关推荐

数据可视化js框架 d3.js入门
数据可视化js框架 d3.js入门 [一] 选择元素绑定数据 1.下载.引入d3.js 2.d3.select():选择所有指定元素的第一个 3.d3.selectAll() :选择指定元素的全部 e ...
A better way to learn D3 js - iLearning D3.js
iLearning D3.js Basic is an iPad app to learn and code with D3. In 1.1 version, new tutorial is prov ...
html文件中包含相关的d3.js文件,D3.js进阶系列之CSV表格文件的读取详解
前言之前在入门系列的教程中,我们常用 d3.json()函数来读取 json 格式的文件.json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 ...
html 实时曲线 js,基于d3.js实现实时刷新的折线图
先来看看效果图下面直接上源代码,html文件实时刷新折线图 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: ...
three.js和D3.js
D3.js是一个数据可视化的库,看看他们的DEMO就可以知道,技术基础是SVG.兼容性是IE9+. three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环. web ...
一个JS框架D3.js
最近有点不务正业,好吧,诚恳一点面对现实.许多时候我想等我把某些问题,完全想明白,完全理解透,再写点东西:事实往往相反,发现等我真正接近,把某些东西理解好,我自己再也不屑写点东西分享了,没有精神气也好 ...
牛逼了啊！用 JS 实现了识别网页验证码的功能！
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群作者:LeoNaN https://zhuanlan.zhihu.com/p/28483558 很高兴大家喜欢!Github:leonof ...
html js 地球仪,D3.js 旋转的地球仪
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var width = 960, height = 720, speed = 1e-2, start = D ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...

牛逼的js--就是d3.js

牛逼的js--就是d3.js相关推荐

最新文章

热门文章