JimmyLuo17的博客

动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化过程的。而这个变化过程在 D3 里我们称之为过渡（transition）。实现动态的 API D3 提供了 4 个方法用于实现图形的过渡，即从状态 A 变为状态 B。transition()该 API 的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等），例如：.attr("fil

引入 D3 文件：<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>选择集与链式语法 使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。有人会发现，D3 能够连续不断地调用函数，形如：d3.select().selectAll().text()这称为链式语法，和

画布是什么前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。要绘图，首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。SVG 是什么 SVG 指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形。除了 IE8 之前的

一、布局函数要制作饼图，得先定义一个布局函数，即：var pie = d3.layout.pie(); // 变量pie就是那个布局函数布局好后，再转换数据成适合于作图的数据，即：var dataset = [ 30 , 10 , 43 , 55 , 13 ];var pieData = pie(dataset); // pieData就是适合做饼图的数据console

如果用原生数值代替像素值，显示的图形过小或过大时，就需要将某一区域的值映射到另一区域，但其大小关系不变，这就是比例尺（Scale）了。定义域与值域 在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者只需要指定 domain() 和 range() 的范围，如此即可得到一个计算关系。两种比例尺线性比例尺：v

六种基本图形 在 SVG 画布的预定义元素里，有六种基本图形：矩形圆形椭圆线段折线多边形另外，还有一种比较特殊，也是功能最强的元素：路径画布中的所有图形，都是由以上七种元素组成。分组元素 分组元素 <g>，是 SVG 画布中的元素，意思是 group，顾名思义此元素是将其他元素进行组合的容器。定义坐标轴 直接先来看示例代码：var dataset = [ 2.5 , 2.1 ,

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。 一、布局是什么布局，英文是 Layout。从字面看，可以想到有“决定什么元素绘制在哪里”的意思，而经过我的学习后，感觉 D3 中的布局有“决定原生数据该绘制成哪种可视化图形”的作用。我们先来看看 D3 与其它可视化工具的区别：我们看到 D3

交互 它指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。 用户用于交互的工具一般有三种：鼠标、键盘、触屏。API与常用事件 在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。鼠标常用的事件有：click：鼠标单击某元素时，相当于 mousedown 和 mouseup

什么是 Update、Enter、Exit如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。示意图如下所示：如此，便可以

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。一、力导向图我们先来了解一下力导向图（Force-Directed Graph）的定义。首先，它是绘图的一种算法。在二维或三维空间里配置节点。节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用。力的大小