D3.js-基础知识
数据可视化已变得越来越被重视,市面上也出现了越来越多的图标库,如Highcharts。图标库很容易可以上手,然而在当前注重用户交互的时代,其不易交互性突显的越来越明显。
一、数据可视化
数据可视化起源于18世纪,当时使用柱形图和折线图来表示国家进出口量。近年,随着大数据时代的到来,数据可视化作为大数据量的呈现方式,成为当前重要的课题。数据可视化的目的,是要对数据进行可视化处理,以使得能够明确地、有效地传递信息。
二、D3
D3(Data-Driven Document),是一个JavaScript的函数库,是用来做数据可视化的。Document即文档对象模型(DOM)。D3允许用户绑定任意数据到DOM,然后根据数据来操作文档,创建可交互式的图标。
D3优势:
- 数据能够与DOM绑定在一起;
- 数据转化和绘制是对立的;
- 代码简洁;
- 大量布局;
- 基于SVG(矢量图形),缩放不会损失精度。
三、SVG
SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式。D3在SVG中绘制图形!!! SVG使用XML格式来定义图形,可将SVG直接嵌入HTML中显示,也可以直接将文件名改为xxx.svg来使用。
SVG中预定义了七种形状元素,分别为:矩形<rect>、圆形<circle>、椭圆<elliipse>、线段<line>、折线<polyline>、多边形<polygon>、路径<path>
。
1. 矩形
参数 | 说明 |
---|---|
x | 矩形左上角的x坐标 |
y | 矩形左上角的y坐标 |
width | 矩形的宽度 |
height | 矩形的高度 |
rx | 对于圆角矩形,指定椭圆在x方向的半径 |
ry | 对于圆角矩形,指定椭圆在y方向的半径 |
<svg width="1000" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 直角矩形 --><rect x="20" y="20" width="200" height="100" style="fill: steelblue; stroke: blue; stroke-width:4; opacity: 0.5"></rect><!-- 圆角矩形 --><rect x="250" y="20" rx="10" ry="10" width="200" height="100" style="fill: steelblue; stroke: blue; stroke-width:4; opacity: 0.5"></rect>
</svg>
2. 圆形和椭圆形
参数 | 说明 |
---|---|
cx | 圆心的x坐标 |
cy | 圆形的y坐标 |
r | (圆形)半径 |
rx | (椭圆)水平半径 |
ry | (椭圆)垂直半径 |
<svg width="1000" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 圆形 --><circle cx="150" cy="50" r="50" fill="blue"></circle><!-- 椭圆 --><ellipse cx="350" cy="150" rx="110" ry="80" style="fill: yellow; stroke: blue; stroke-width: 3"></ellipse>
</svg>
3. 线段
参数 | 说明 |
---|---|
x1 | 起点的x坐标 |
y1 | 起点的y坐标 |
x2 | 终点的x坐标 |
y2 | 终点的y坐标 |
<svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 直线 --><line x1="20" y1="20" x2="50" y2="50"style="stroke: black; stroke-width: 3"></line>
</svg>
4. 多边形和折线
只有一个points参数,表示一系列的点坐标。
不同之处是多边形会将终点和起点连接起来。
<svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 多边形 --><polygon points="100,20 20,90 60,160 140,160 180,90"style="fill: green; stroke: black; stroke-width: 3"></polygon><!-- 折线 --><polyline points="400,220 320,290 360,360 440,360 480,290"style="fill:white; stroke: black; stroke-width: 3"></polyline>
</svg>
5. 路径
类型 | 参数 | 说明 |
---|---|---|
移动类 | M = moveto | 将画笔移动到指定坐标 |
直线类 | L = lineto | 画直线到指定坐标 |
直线类 | H = horizontal lineto | 画水平直线到指定坐标 |
直线类 | V = vertical lineto | 画垂直直线到指定坐标 |
曲线类 | C = curveto | 画三次贝塞尔曲线经两个指定控制点到达终点坐标 |
曲线类 | S = shorthand/smooth curveto | 与第一条三次贝塞尔曲线相连,第一个控制点为前一条曲线第二个控制点的对称点,只需输入第二个控制点和终点 |
曲线类 | Q = quadratic Bezier curveto | 画二次贝塞尔曲线经一个指定控制点到达终点坐标 |
曲线类 | T = shorthand/smooth quadratic Bezier curveto | 与前一条二次贝塞尔曲线相连,控制点为前一条二次贝塞尔曲线控制点的对称点,只需输入终点 |
弧线类 | A = elliptical arc | 画椭圆曲线到指定坐标 |
闭合类 | Z = closepath | 绘制一条直线连接终点和起点,用来封闭图形 |
<svg width="1000" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 绘制直线 --><path d="M30,100 L270,300M30,100 H270M30,100 V300"style="stroke: black; stroke-width: 3px;"></path>
</svg>
<svg width="1000" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 绘制三次贝塞尔曲线 --><path d="M30,100 C100,20 190,20 270,100S400,180 450,100"style="fill:white; stroke: black; stroke-width: 3px;"></path>
</svg><svg width="1000" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 绘制二次贝塞尔曲线 --><path d="M30,100 Q190,20 270,100T450 100"style="fill:white; stroke: black; stroke-width: 3px;"></path>
</svg>
<svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 绘制弧线(相对坐标-终点) --><path d="M100,200 a200,150 0 1, 0 150,-150 Z"style="fill:yellow; stroke: blue; stroke-width: 3px;"></path>
</svg>
<svg width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"><!-- 绘制弧线(绝对坐标-终点) --><path d="M100,200 A200,150 0 1, 0 250,50 Z"style="fill:yellow; stroke: blue; stroke-width: 3px;"></path>
</svg>
6、 文字
在SVG中可以使用标签绘制文字。
参数 | 说明 |
---|---|
x | 文字位置的x坐标 |
y | 文字位置的y坐标 |
dx | 相对于当前位置在x方向上平移的距离(正则往右,负则往左) |
dy | 相对于当前位置在y方向上平移的距离(正则往下,负则往上) |
textLength | 文字的显示长度(不足则拉长,足则压缩) |
rotate | 旋转角度(顺时针正,逆时针负) |
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"><text x="100" y="150" dx="-50" dy="-50" rotate="0" textLength="90">I love <tspan fill="blue">D3</tspan></text>
</svg>
D3.js-基础知识相关推荐
- JS基础知识学习(一)
JS基础知识 前端开发常用的浏览器 谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核 欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
- (七)JS基础知识四(搞定异步)【三座大山之三,必考!!!】
JS基础知识四(异步) 提问 单线程 应用场景 callback hell和promise 提问 同步和异步的区别是什么 手写用Promise加载一张图片 前端使用的异步的场景有哪些 单线程 JS是单 ...
- (六)JS基础知识三(走进作用域和闭包)【三座大山之二,不会闭包,基本不会通过】
JS基础知识三(作用域和闭包) 提问 作用域 自由变量 闭包 this 提问 this的不同应用场景,如何取值 手写bind函数 实际开发中闭包的应用场景,举例说明 创建10个a标签,点击的时候弹出对 ...
- (五)JS基础知识二(通过图理解原型和原型链)【三座大山之一,必考!!!】
JS基础知识二(原型和原型链) 提问 class 继承 类型判断(instanceof) 原型 原型关系 基于原型的执行规则 原型链 说明 提问 如何准确判断一个变量是不是数组 class的原型本质 ...
- (四)JS基础知识一(深入分析变量类型和计算)【不会变量,别说你会JS】
JS基础知识一(变量类型和计算) 提问 变量类型 值类型 vs 引用类型 (堆栈模型) 值类型 引用类型 typeof 运算符 深拷贝 变量计算 字符串拼接 == if语句和逻辑运算 if语句 逻辑判 ...
- Js基础知识梳理系列
小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的"瓶颈期".问了一些前辈是否也遇到过同样的问题,他们给我的解 ...
- 了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
js基础知识中的作用域和闭包 一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
- js基础知识学习(二)
JS基础知识 JavaScript 数据类型转换 把其它数据类型转换为number类型 isNaN .Number.parseInt.parseFloat 在进行加减乘除数学运算的时候 true-&g ...
- 前端学习笔记(js基础知识)
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
- php插入js教程,JavaScript_JavaScript入门教程(2) JS基础知识,在什么地方插入 JavaScript Ja - phpStudy...
JavaScript入门教程(2) JS基础知识 在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方.使用标记,你可以在 HTML 文档的任意地方插入 Jav ...
最新文章
- linux ip add address,linux – ip地址范围参数
- Android应用安全与防范之签名校验
- 构造数列中的常见变形总结【中阶和高阶辅导】
- Quartz.Net定时任务EF+MVC版的web服务
- Ajax提交数据判断员工编号是否存在,及自动填充与员工编号所对应的员工姓名。...
- PHP计算字符串的个数
- docker--强制删除none的image镜像
- Docker(包括docker、mysql、tomcat的安装,以及部署web工程文件)
- mac html flash,苹果电脑flash过期无法打开网页的解决方法
- 数值分析实验四 最小二乘法曲线拟合
- 科力锐助力政务云统一灾备中心建设
- CentOS7 下MariaDB安装与简单配置(最新)
- 基于javaweb+mysql的个人日记管理系统
- OpenDRIVE文件格式详解
- UTM——统一威胁管理
- Pycharm使用教程 (非常实用)
- 数据分析概率及统计学基础
- https证书风险修复
- 深入理解JVM(高级进阶)
- linux命令useradd