D3.js - 随笔分类 - 冷雨恋晴

【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用

摘要：在前面几节中反复出现了如下代码： [javascript] view plain copy svg.selectAll("rect") .data(dataset) .enter() .append("rect") [javascript] view plain copy [javascript] 阅读全文

posted @ 2016-09-03 10:51 冷雨恋晴阅读(852) 评论(0) 推荐(1)

【 D3.js 入门系列 --- 6 】如何让图表动起来

摘要：[5.1]节中制作了一个比较完善的图表，但它是静态的，想做出它的动态效果吗？在D3中只需要短短的几行代码即可。这一节将涉及4个函数的使用。 1.transition() 启动转变效果只需要添加这个即可。把它加到两种状态之间，例如： [javascript] view plain copy .att 阅读全文

posted @ 2016-09-03 10:49 冷雨恋晴阅读(447) 评论(7) 推荐(2)

【 D3.js 入门系列 --- 5.1 】做一个带坐标轴和标签的图表

摘要：前面几节讲解了图标、坐标轴、比例等等，这一节整合这些内容做一个实用的图表。结果图如下：代码如下所示： [html] view plain copy <html> <head> <meta charset="utf-8"> <title>Chart</title> </head> <style> . 阅读全文

posted @ 2016-09-03 10:47 冷雨恋晴阅读(2231) 评论(1) 推荐(2)

D3 的优势

摘要：可视化的库有很多，基于 JavaScript 开发的库也有很多，D3 有什么优势呢？（1）数据能够与 DOM 绑定在一起 D3 能够将数据与 DOM 绑定在一起，使得数据与图形成为一个整体，即图形中有数据、数据中有图形。那么在生成图形或更改图形时，就可以方便地根据数据进行操作，并且，当数据更改之后阅读全文

posted @ 2016-08-30 10:53 冷雨恋晴阅读(956) 评论(0) 推荐(1)

【 D3.js 入门系列 --- 5 】如何添加坐标轴

摘要：第3节中做了一个图标，但没有为它添加一个相应的坐标轴，这样不知道每一个柱形到底有多长。这一节做一个坐标轴。 D3中的坐标轴都是以 svg 图的形式出现的，这也是为什么在第3节中要使用 svg 的方法做柱形图的原因。第4节里我们讲解了 scale （比例）的用法，在做坐标轴的时候也需要用到比例。第4节阅读全文

posted @ 2016-08-29 21:04 冷雨恋晴阅读(444) 评论(0) 推荐(1)

【 D3.js 入门系列 --- 4 】如何使用scale（比例）

摘要：在上一节中使用了一个很重要的概念 — scale （这个不知道翻译成什么，暂且叫它比例）。本节将重点介绍它的相关使用方法。在介绍 scale 之前，先介绍两个经常和 scale 一起出现的函数，在上一节中也出现了。 d3.max() d3.min() 它们用于求一个数组中的最大值和最小值，如果是一阅读全文

posted @ 2016-08-29 19:52 冷雨恋晴阅读(2239) 评论(0) 推荐(1)

【 D3.js 入门系列 --- 3 】做一个简单的图表！

摘要：前面说了几节，都是对文字进行处理，这一节中将用 D3.js 做一个简单的柱形图。做柱形图有很多种方法，比如用 HTML 的 div 标签，或用 svg 。推荐用 SVG 来做各种图形。SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 使用 XML 格式定义图阅读全文

posted @ 2016-08-27 17:15 冷雨恋晴阅读(1016) 评论(2) 推荐(2)

【 D3.js 入门系列 --- 2.1 】关于如何选择，插入，删除元素

摘要：在D3.js中，选择元素的函数有两个：select 和 selectAll 。先说明一下它们的区别： select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部（以用于后面同时操作）来看一个具体的例子，现有如下代码： [html] view plain copy <htm 阅读全文

posted @ 2016-08-27 16:31 冷雨恋晴阅读(692) 评论(0) 推荐(1)

【 D3.js 入门系列 --- 2 】如何使用数据和选择元素

摘要：接着上一讲的内容，这次讨论如何选择元素和使用数据。现在页面中有三行文字，代码为： [html] view plain copy Hello World 1 Hello World 2 Hello World 3 [html] view plain copy 阅读全文

posted @ 2016-08-27 14:56 冷雨恋晴阅读(469) 评论(1) 推荐(2)

【 D3.js 入门系列 --- 1 】第一个程序HelloWorld

摘要：下面开始用D3.js处理第一个简单问题，先看下面的代码： [html] view plain copy <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> </head> <body> Hello World 1 阅读全文

posted @ 2016-08-27 11:06 冷雨恋晴阅读(446) 评论(1) 推荐(1)

【 D3.js 入门系列 --- 0 】简介和安装

摘要：D3的全称是（Data-Driven Documents），顾名思义可以知道是一个关于数据驱动的文档的javascript类库。如果你不知道什么是javascript，请先学习javascript的相关知识。说得简单一点，D3.js主要是用于操作数据的，它通过使用HTML、SVG、CSS来给你的数阅读全文

posted @ 2016-08-27 10:39 冷雨恋晴阅读(266) 评论(1) 推荐(0)

导航

随笔分类 - D3.js