D3 数据可视化
dq_095
软件工程师一位
展开
-
D3.js 数据可视化
”一张图片价值于一千个字“第一课 简介和安装D3是什么 全称是(Data-Driven Documents),一个被数据驱动的文档 简单点,是一个JavaScript函数库,使用它主要用来做数据可视化。 D3 是一个开源项目,作者是纽约时报的工程师。D3也叫D3.js: 提供了各种简单易用的函数,大大简化JS操作数据的难度,尤其在数据可视化方面,D3已将生成可视化的复杂步骤...原创 2018-08-09 18:41:56 · 10199 阅读 · 1 评论 -
D3.js 第6课 比例尺的使用
第6课 比例尺的使用 比例尺是 D3 中很重要的一个概念为什么要用比例尺上一章制作了一个柱形图,当时有一个数组var dataset = [ 250 , 210 , 170 , 130 , 90 ];绘图时,直接使用 250 给矩形的宽度赋值,即矩形的宽度就是 250 个像素。此方式非常具有局限性,如果数值过大或过小,例如: var dataset_1 = [...原创 2018-08-10 09:45:05 · 346 阅读 · 0 评论 -
D3.js 第15课 地图
本文以中国地图为例,介绍地图的制作方法。 在数据可视化中,地图是很重要的一部分。很多情况会与地图有关联,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起。地图数据的获取制作地图需要 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。将 JSON 的格式应用于地理上的文件,叫做 GeoJSON 文件。...原创 2018-08-10 02:04:54 · 1354 阅读 · 0 评论 -
D3.js 第14课 力导向图
力导向图: 每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表。 力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能...原创 2018-08-10 01:45:04 · 998 阅读 · 0 评论 -
D3.js 第13课 饼状图
本文制作一个饼状图。 在布局的应用中,最简单的就是饼状图,通过本课您将对布局有一个初步了解。 数据var dataset = [ 30 , 10 , 43 , 55 , 13 ];这样的值是不能直接绘图的。例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都不存在于数组 dataset 中。因此,需要用到布局,布局的作用就是: 计算出适合于作图的数...原创 2018-08-10 01:25:10 · 991 阅读 · 0 评论 -
D3.js 第12课 布局是什么
布局:理解成 “制作常见图形的函数,有了它制作各种 “相对复杂的图表”就方便多了。 布局是什么英文是 Layout。 从字面看,可以想到有“决定什么元素 绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手。下图展示了 D3 与其它可视化工具的区别: ...原创 2018-08-10 01:03:06 · 292 阅读 · 0 评论 -
D3.js 第13课 交互式操作
与图表的交互,指的是在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应。 什么是交互指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应。对可视化图表来说,交互能使图表更加生动,能表现更多内容。 例如,拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种:鼠标、键盘、触屏。如何添加交互对...原创 2018-08-10 00:39:11 · 568 阅读 · 0 评论 -
D3.js 第十课 理解 Update、Enter、Exit
Update、Enter、Exit是 D3 中三个非常重要的概念 处理当选择集和数据的数量 关系不确定的情况。什么是 Update、Enter、Exitsvg.selectAll("rect") //选择svg内所有的矩形 .data(dataset) //绑定数组 .enter() //指定选择集的enter部分 .app...原创 2018-08-10 00:24:20 · 380 阅读 · 0 评论 -
D3.js 第九课 让图表动起来
D3 支持 “制作动态的图表”有时候,让用户看清楚图表的 缓慢变化的过程,能给用户不小的友好感。什么是动态效果静态的图表:一蹴而就地出现,绘制完成后 不再发生变化动态的图表:是指图表在某一时间段会发生某种变化,可能是形状、颜色、位置等,而且用户是可以看到变化的过程的。例如;一个圆,圆心为 (100, 100)。我们希望圆的 x 坐标从 100 移到 300,并且移动过程在是...原创 2018-08-10 00:08:00 · 584 阅读 · 0 评论 -
D3.js 第八课 完整的柱形图 #D3.js 数据可视化
第八课 完整的柱形图 完整柱形图包含三部分:矩形、文字、坐标轴知识点内容包括:选择集、数据绑定、比例尺、坐标轴等。添加 SVG 画布//画布大小var width = 400;var height = 400;//在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .att...转载 2018-08-09 23:19:27 · 844 阅读 · 0 评论 -
D3.js 第7课 坐标轴
D3.js 第7课 坐标轴可视化图表中,经常出现的一种图形 由线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的,由其他的元素组合构成。D3 提供了坐标轴的组件 坐标轴由什么构成有六种基本图形:矩形圆形椭圆线段折线多边形另外一种比较特殊,也是功能最强的元素路径画布中的所有图形,都是由以上七种元素组成。用其他元素来组合坐标轴,...原创 2018-08-10 09:54:53 · 432 阅读 · 0 评论