随笔分类 - 数据可视化插件D3.js
摘要：一、添加一个矩形 二、添加多条矩形 三、均匀的添加条-定条宽 除的方式(i * (w / dataset.length);)作为条和间隙的总宽度，在设置固定宽度小于总宽度，这时就会自然生成一个空白间隙 一句话：条的宽度固定，总宽-条宽=空白宽。空白宽取决于总宽，总宽取决于计算表达式(w / data
阅读全文
摘要：代码解释： 1.1 为同类层添加样式 div.bar { display: inline-block; width: 20px; background-color: teal; } 1.2 声明要为某类层设置属性 .attr("class", "bar") 1.3 为每个特定的层设置属性 .styl
阅读全文
摘要：柱形图是一种最简单的可视化图标，主要有矩形、文字标签、坐标轴组成。 本文为简单起见，只绘制矩形的部分，用以讲解如何使用 D3 在 SVG 画布中绘图。 一、 画布是什么 前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。 要绘图，首要需要的是一块绘图的“画布”。 HTML 5 提供两种强有
阅读全文
摘要：插入元素涉及的函数有两个： 一、append()：在选择集末尾插入元素 假设有三个段落元素 在 body 的末尾添加一个 p 元素，结果为： 二、insert()：在选择集前面插入元素 在 body 中 id 为 myid 的元素前添加一个段落元素。 已经指定了 Pear 段落的 id 为 myid
阅读全文
摘要：在上一节中，已经讲解了 select 和 selectAll，以及选择集的概念。本节具体讲解这两个函数的用法。 假设在 body 中有三个段落元素： 现在，要分别完成以下四种选择元素的任务。 一、选择第一个 p 元素 使用 select ，参数传入 p 即可，如此返回的是第一个 p 元素。 结果如下
阅读全文
摘要：选择元素和绑定数据是 D3 最基础的内容，本文将对其进行一个简单的介绍。 一、如何选择元素 在 D3 中，用于选择元素的函数有两个： d3.select()：是选择所有指定元素的第一个 d3.selectAll()：是选择指定元素的全部 d3.select()：是选择所有指定元素的第一个 d3.se
阅读全文
摘要：一、HTML 是怎么输出 HelloWorld 的 会在浏览器中输出两行文字，如下图： 二、用 JavaScript 来更改 HelloWorld 对于上面输出的内容，如果想用 JavaScript 来更改这两行文字，怎么办呢？我们会添加代码变为： 结果变为： 三、用 D3 来更改 HelloWor
阅读全文
摘要：一、What´s D3.js D3.js是一种数据操作类型的javascript库（也可视其为插件）；结合HTML,SVG和CSS，D3可以图形化的，生动的展现数据。 D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。就是一个 JavaScript
阅读全文
摘要：这是一种用于描述节点之间联系的图表。 1. 弦图是什么 弦图（Chord），主要用于表示两个节点之间的联系。 两点之间的连线，表示谁和谁具有联系： 线的粗细表示权重： 2. 数据 初始数据为：
阅读全文
摘要：力导向图中每一个节点都受到力的作用而运动，这种是一种非常绚丽的图表。 力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。 各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算
阅读全文
摘要：1、数据 有如下数据，需要可视化： 这样的值是不能直接绘图的。例如绘制饼状图的一个部分，需要知道一段弧的起始角度和终止角度，这些值都不存在于数组 dataset 中。因此，需要用到布局，布局的作用就是：计算出适合于作图的数据。这个过程称为数据转换 2、布局（数据转换） 定义一个布局，返回值赋给变量
阅读全文
摘要：布局，可以理解成 “制作常见图形的函数”，有了它制作各种相对复杂的图表就方便多了。 一、布局是什么 布局，英文是 Layout。从字面看，可以想到有“决定什么元素绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。 D3 与其它很多可视化工具不同，相对来说较底层，对初学者来说不太方便，但是一旦掌
阅读全文
摘要：与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。 一、什么是交互 交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。 例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等
阅读全文
摘要：Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。 一、什么是 Update、Enter、Exit 这段代码使用的情况是当以下情况出现的时候：有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。 假设，在 body 中有三
阅读全文
摘要：D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。 一、什么是动态效果 绘制完成后不再发生变化的，这是静态的图表。 动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。 例如，有一个
阅读全文
摘要：一个完整的柱形图包含三部分：矩形、文字、坐标轴。制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。 1. 添加 SVG 画布 上面定义了一个 padding，是为了给 SVG 的周边留一个空白，最好不要将图形绘制到边界上。 2. 定义数据和比例尺 x 轴使用序数比例尺，y 轴使
阅读全文
摘要：坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。 D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。 一、坐标轴构成 在 SVG 画布的预定义元素里，有六种基本图形： 矩形
阅读全文
摘要：比例尺是 D3 中很重要的一个概念，直接用数值的大小来代表像素不是一种好方法 一、为什么需要比例尺 制作一个柱形图，会有一个数组：var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。
阅读全文
