数据可视化

点、线、柱、饼...
简单地说，数据可视化就是以图形的方式表示数据

数据可视化的技术

echarts、highcharts、百度地图、chartjs、D3.js

第3方的可视化库依赖两个东西
Echarts.js 依赖于canvas 图片放大会失真市面上用的比较多，现有的图形非常丰富。
D3.js 依赖于svg 不会失真图形非常少，擅长定制各种图形

canvas原生技术

快速入门

canvas是html5新增的一个标签，后续所有的操作都使用js脚本。
canvas就是一个画板或画布。
css3 + js的运动 + 定时器
更准确的说是 html5新增的js_api / video ( play ,pause ) localstorage

Canvas标签、画笔对象、基本的图形（矩形、圆、线、其它特殊图形【正方形、三角形】）
路径的概念（开启路径、关闭路径）
绘制图像（现有的图形放置到canvas中）
绘制文字
图形【画布】的转换，放大、旋转、位移

canvas的基本概念

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas基础-绘制矩形</title><style>*{padding: 0;margin: 0;}#canvas{border: 1px solid rebeccapurple;/* width: 500px;height: 500px; */}</style>
</head>
<body><!-- 默认透明，默认宽300 高150  像素，新增的标签：兼容注意事项：不要使用css设置canvas的宽和高。同时画布是透明的png，默认画布上的点、线、文字色 都是黑色坐标系：下和右是坐标系正方向 。canvas 是画布，所以也是图片widthheight也可以使用js指定画布的宽和高canvas画板有了，接下来需要一个画笔对象--><canvas id="canvas"  width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>// 获取元素let canvas = document.getElementById('canvas');// 可以用js设置 但不要加style.width 这样又成css了// canvas.width = 500;// canvas.height = 500;//获取画笔对象（ 画布的上下文环境对象 ）let ctx = canvas.getContext('2d');console.log(canvas.getContext,ctx);//绘制一个矩形  画笔对象上肯定有一个绘制矩形的功能函数   fillRect() 填充一个矩形  strokeRect 描边一个矩形// fillRect(x,y,width,height)ctx.fillRect(10,10,100,150); //填充一个矩形ctx.strokeRect(120,10,50,200); //描边一个矩形// 45°的斜线ctx.moveTo(10,10);ctx.lineTo(200,200);ctx.lineWidth = 2;ctx.strokeStyle = 'red';ctx.stroke();</script>
</body>
</html>

绘制图形步骤

创建canvas标签
获取canvas对象
获取ctx画笔对象
使用画笔中的各种方法和路径绘制各种各样的图形

路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>路径 - 画线</title><style>*{padding: 0;margin: 0;}#canvas{border: 1px solid red;}</style>
</head>
<body><canvas id="canvas"  width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//圆 /椭圆和矩形有现成的方法就代表 圆和矩形  arc| 描绘一个圆的路径  rect|描绘一个矩形路径//然后使用 fill或rect进行填充// 绘制一个矩形// ctx.rect(20,20,100,150);// ctx.fill();// 填充 图形// ctx.stroke();// 描边 图形// 错误的画线方法 高度为 0// ctx.rect(10,10,100,0);// ctx.stroke();//真确的画线方法先moveTo(x,y)到起始点  然后使用lineTo(x,y)到各个点，实现折线图ctx.moveTo(10,10);//确定起始点ctx.lineTo(200,200);//到点 1ctx.lineTo(200,60);//到点 2...ctx.lineTo(400,300);ctx.stroke();//描边// ctx.fill();//填充</script>
</body>
</html>

颜色的处理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>颜色的处理</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');/*ctx.fillStyle = '颜色值|单词、十六进制、rgba'  填充颜色，默认是黑色ctx.strokeStyle = '颜色值|单词、十六进制、rgba'  描边颜色，默认是黑色一定是在填充或描边之前进行设定*/// 绘制矩形ctx.rect(10, 10, 300, 300);// ctx.fillStyle = 'red';// ctx.fillStyle = 'rgba(0,0,255,.6)';ctx.fillStyle = 'rgb(0,0,255)';ctx.fill();//填充 前处理ctx.lineWidth = 5;//宽度 不带单位// ctx.strokeStyle = 'rgba(255,0,0,.4)';ctx.strokeStyle = 'red';/*bevel    创建斜角。round  创建圆角。miter  默认。创建尖角。*/ ctx.lineJoin = 'round';ctx.stroke();//描边 前处理</script>
</body></html>

线的处理-开启路径-闭合路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>路径 开启-闭合</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');/*在整ctx画笔对象的上下文环境中fillStyle、strokeStyle、文字大小等都是全局的。所以如果不开启路径，那么后面的会覆盖掉前面的。*/ // 在不开启路径的情况下 用的是公共的 是有问题的 会出现相互影响的情况// 总结：以后绘制这种路径图形，一定要先开启路径（ 独立的空间 ）ctx.beginPath();//开启路径 （拥有独立的空间）ctx.moveTo(100,10);ctx.lineTo(200,100);ctx.lineWidth = 5;ctx.strokeStyle = 'red';ctx.stroke();//描边ctx.beginPath();//开启路径 （拥有独立的空间）ctx.moveTo(200,10); //起点ctx.lineTo(300,100); //定义点ctx.lineWidth = 10; //线条的宽度ctx.strokeStyle = 'blue'; //描边颜色ctx.stroke();// 绘制三角形 没有使用闭合路径ctx.beginPath();//开启路径 （拥有独立的空间）ctx.moveTo(80,180);// 一个路径中moveTo只能使用一次ctx.lineTo(200,150);ctx.lineTo(100,80);// ctx.lineTo(80,180); //不使用闭合路径 需要手动闭合ctx.closePath();//闭合路径，起点和结束的会自动闭合ctx.lineWidth = 2;ctx.strokeStyle = 'red';ctx.lineJoin = 'round';ctx.stroke();//描边</script>
</body>
</html>

画圆-太极图案

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//arc    先描述一个路径  //fill  stroke//画圆、画圆弧// 参数 ( x,y,r,startAngle,endAngle ,顺|逆)  是弧度制  true 顺时针 | false 逆时针   (角度 / 180 * Math.PI)//200，200    r= 150// 画圆ctx.beginPath();//开启路径ctx.moveTo(200,200);//移动到圆心的位置  如果画一个360度圆不需要使用moveTo// ctx.arc(200,200,150,0, 360 / 180 * Math.PI);//描述一个圆弧路径ctx.arc(200,200,150,0, 2 * Math.PI);//描述一个圆弧路径// ctx.fill();//填充ctx.stroke();//描边// 画扇形ctx.beginPath();//开启路径ctx.moveTo(300,200);//扇形必须指定起点ctx.arc(300,200,150,0, Math.PI);//描述一个圆弧路径ctx.closePath();//闭合路径// ctx.fill();//填充ctx.stroke();//描边// 绘制椭圆 其中一种ctx.beginPath();// ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)// (起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)ctx.ellipse(200,100,100,40,0,0,Math.PI*2);ctx.fillStyle="#058";ctx.strokeStyle="#000";ctx.fill();ctx.stroke();</script>
</body></html>

缩放-变形-状态

缩放、位移、旋转（弧度制）、 Save和restore
这些操作，影响整个画布，也就是意味着后面的图形都会有影响

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变形缩放-save-resrore</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//获取画笔对象//ctx.beginPath()  //主要是操作属性的状态//画布的状态 scale(1,1)  translate(0,0)  rotate(0)// 缩放// ctx.scale(x,y) 1,1 缩小 是小数ctx.scale(.6,2);ctx.rect(0,0,50,50);//矩形ctx.fill();//填充// 旋转ctx.rotate( -30/180*Math.PI);ctx.rect(50,50,100,50);ctx.fill();// 移动原点 x,y  会影响所有的原点ctx.translate(100,100);ctx.rect(0,0,50,100);ctx.fill();// 他受到了原点的影响ctx.rect(0,0,90,20);ctx.stroke();// 解决上述问题ctx.save();//操作之前 把画布之前的状态保存一下ctx.translate(100,100);//改变原点坐标ctx.rect(0,0,50,50);//绘制矩形ctx.fill();//填充ctx.restore();//恢复状态ctx.rect(100,0,150,50);ctx.fill();</script>
</body>
</html>

线性-径向渐变

不要使用大量的渐变，需要很多色彩，而且计算机还需要计算位置。会影响性能。
当ui设计图中有渐变的素材，可以直接使用切换裁下来。然后使用drawImage

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//获取画笔对象//线性渐变// createLinearGradient( x0,y0,x1,y1 )返回一个对象// addColorStop( 小数,颜色 )// let linearGradient = ctx.createLinearGradient(0,0,300,300);//对角线// let linearGradient = ctx.createLinearGradient(0,0,300,0); //垂直// 渐变过程的颜色点// linearGradient.addColorStop(0.3,'red');// linearGradient.addColorStop(0.6,'green');// linearGradient.addColorStop(1,'#fff');//为fillStyle设置为渐变色// ctx.fillStyle = linearGradient;// ctx.rect(0,0,300,300);// ctx.fill();// 径向渐变//ctx.createRadialGradient( x0,y0,r0,x1,y1,r1 )let radialGradient = ctx.createRadialGradient(100,100,10,100,100,150);radialGradient.addColorStop(0.2,'red');radialGradient.addColorStop(0.8,'green');radialGradient.addColorStop(1,'blue');ctx.fillStyle = radialGradient;ctx.rect(0,0,200,200);ctx.fill();</script>
</body>
</html>

阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>阴影</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//获取画笔对象// shadowOffsetX 偏移值// shadowOffsetY // shandowColor //阴影颜色// shandowBlur //模糊// 第一种方式 开启路径ctx.beginPath();//1 开启路径ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 10;ctx.shadowColor = 'red';ctx.shadowBlur = 10;ctx.rect(10,10,100,40);ctx.fill();//填充// 会影响到ctx.beginPath();ctx.rect(150,150,150,50);// 从设置 覆盖ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;ctx.shadowBlur = 0;ctx.fill();// 第二种方式 保存状态ctx.save();//2 保存操作之前的状态ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 10;ctx.shadowColor = 'blue';ctx.shadowBlur = 10;ctx.rect(140,10,100,40);ctx.fill();//填充// 会影响到ctx.restore();//恢复状态ctx.rect(340,150,150,50);ctx.fill();</script>
</body>
</html>

文本-清除画布

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本-清除画布</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//获取画笔对象/*fillText( 绘制的字符,x,y ) | strokeText()font = '字号 字体'textBaseline = '' 对齐方式 默认为：alphabetic  "alphabetic|top|hanging|middle|ideographic|bottom";textAlign = start end*/ctx.font = '60px 宋体';ctx.textBaseline = 'top';ctx.fillStyle = 'blue';ctx.fillText('阿豪',10,0);//    ctx.strokeText('阿豪',10,0);// 清空给定矩形内的指定像素ctx.clearRect(0,0,100,40)</script>
</body>
</html>

Canvas画时钟

刻度对象（短 60、长12 ）
罗马数字（数学： sin、cos ）
时针、分针、秒针对象
圆点对象
品牌文字

绘制图片drawImage

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}#canvas {border: 1px solid red;}</style>
</head><body><!-- <img src="https://www.runoob.com/try/demo_source/img_the_scream.jpg" alt="t"> --><canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas><script>let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//获取画笔对象/*drawImage基础版 3个参数   把图片放置到canvas中，无需设定width、height尊享版 5个参数  可以指定width和height至尊版 9个参数  可以裁切图片，放置到canvas中同时也可以指定width和height*///图片必须加载成功以后，触发图片的onLoad事件。才可以使用drawImage方法//1. 使用js的Image构造函数创建一个图片对象let imgObj = new Image();imgObj.src = 'https://www.runoob.com/try/demo_source/img_the_scream.jpg';// console.log(imgObj);imgObj.onload = function () {//1 基础版 3个参数   把图片放置到canvas中，无需设定width、height//drawImage( img,x,y )ctx.drawImage(imgObj, 10, 10);//设置图片放置的位置// 2 尊享版  5个参数  可以指定width和height//ctx.drawImage( img,x,y,w,h )//放置到x30y30的位置，并且指定图片为width 100 height 150ctx.drawImage(imgObj,30,30,100,150);//3 至尊版  9个参数  可以裁切图片，放置到canvas中同时也可以指定width和height//drawImage( img,sx,sy,swidth,sheight,x,y,width,height )// sx,sy ,swidth,sheight 裁切的 起始位置 和 裁切大小 关系//x,y,width,height和放置到canvas画布上 起始位置 和 宽高大小 关系ctx.drawImage(imgObj,90,130,50,60,50,10,100,160)}</script>
</body></html>

运动的小方框见博客

svg

可缩放的矢量图，不会失真。使用的是xml语法。
Canvas可以做一些游戏，但是svg不适合做游戏，svg比较适合做一些图表的项目
通过xml标签形式的语法来描述一些基本图形，矩形、线、圆、渐变

使用步骤

1. 定义svg容器。为容器指定xmlns命名空间 ;http://www.w3.org/2000/svg
2. 画图形、矩形、线、圆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>svg基础</title><style>.svg{border: 1px solid red;/* display: block; */}</style>
</head>
<body><!-- 画布：svg，我们需要指定svg的命名空间，同时svg也有宽和高的属性namespacerect：x,y,width,height   填充色，描边色 线宽--><svg class="svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"><!--rect 矩形 --><!-- x y 起始点 width height 宽高 fill 填充颜色 stroke 描边颜色 rx ry:  radius( 设置圆角的半径 ) --><!-- <rect x='20' y='20' width='100' height='50' fill='rgba(255,0,0,0.3)' stroke='blue' stroke-width='5' rx="5" ry="5"></rect> --><!-- circle 圆心（ cx,cy ）圆心 r 半径 --><!-- <circle id="c1" cx="100" cy="100" r="50" fill="red" stroke="blue" stroke-width="5"></circle> --><!-- 椭圆 ellipse: cx cy ( 圆心 ) 半径 rx ry 水平和竖直的半径--><ellipse cx='100' cy='100' rx='80' ry='40'></ellipse></svg><svg class="svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"><!-- 画线条linex1 y1 起始点x2 y2 结束点--><line x1='20' y1='20' x2='80' y2='90' stroke='blue' stroke-width='5'></line></svg><svg class="svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"><!-- polyline:points="x1 y1,x2 y2,x3 y3..."transparent 透明--><polyline fill='transparent' stroke='black' points='30 80,60 150,120 60,150 140'></polyline></svg><svg class="svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"><!-- 渐变:定义渐变<defs>:  <linearGradient id="渐变的标识"> x1 y1 x2 y2 如果 x1和x2相同  纵向如果 y1和y2相同  水平如果 x不同y不同  斜角<stop>  offset="百分比" stop-color--><defs><!-- <linearGradient id="lg_1" x1="0%" y1="0%" x2="0%" y2="100%"> --><!-- <linearGradient id="lg_1" x1="0%" y1="0%" x2="100%" y2="0%"> --><linearGradient id="lg_1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color='red'></stop><stop offset="100%" stop-color="yellow"></stop></linearGradient></defs><rect x='20' y='20' width='100' height='50' fill='url(#lg_1'></rect></svg><svg class="svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"><!-- 径向(放射性)渐变defs:radialGradient ( id,cx,cy[ 圆心 :百分比 ]，r[半径 ：百分比] ): stop ( offset="百分比" stop-color="颜色" )--><defs><radialGradient id="rg_1" cx="50%" cy="50%" r="50%"><stop offset="0" stop-color="pink"></stop><stop offset="50%" stop-color="yellow"></stop><stop offset="100%" stop-color="blue"></stop></radialGradient></defs><circle cx="100" cy="100" r="100" fill="url(#rg_1)"></circle></svg><svg class="svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"><!-- 文本text： x，y--><text x="50" y="80" fill="red" font-size="20">HEllo World</text><text x="150" y="180" stroke='blue' stroke-width='2' font-size="20">HEllo World</text></svg><script>//  svg 方便添加事件 操作DOM//  let c1 = document.getElementById('c1');//  c1.onclick = function(){//      console.log('ok111');//  }</script>
</body>
</html>

D3.js

基于svg的一个数据驱动框架

所需要的基础：html、css、js+ svg

对比echarts、d3和canvas、svg的区别和关系

canvas和svg不需要引入任何库和脚本。
而echarts和d3是第3方组织人家开源出来的框架
Echarts：使用svg+canvas技术 + js封装出来的百度框架（开源到apache协议）
D3国外的 svg+js技术最新是5的版本。

使用方式

1.使用cdn引入到网页中
互联网上的一个d3.js网址
<script src=”http://cdn.org/d3.min.js”></script>
2.下载下来，然后d3.js随着你的项目上传到你自己的服务器
<script src=”./d3.min.js”></script>
3.使用webpack脚手架下载d3
npm i d3@3
npm i echartsimport d3 from ‘d3’
import echarts from ‘echarts’

D3借鉴了jquery很多特性。
比如：
选择元素 select selectAll 参考css选择器或者 jquery的选择器
元素的添加、修改、删除 append insert remove
为元素设置属性attr
设置样式 style
datum和data方法进行元素和数据的绑定
设置比例尺
坐标轴体系

d3js基础

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>d3js基础</title>
</head>
<body><p></p><p></p><p id="p1"></p><p id="p2"></p><!-- 引入d3js 对象 --><script src="./d3.v3.min.js"></script><script>console.log(d3,'d3对象');// 1 选择元素//select 选择符合的第1个元素  selectAll是选择一个结果集//借鉴jquery的链式风格（ 只要是一个对象【jquery】d3 就能够点下去 ）d3.selectAll('p').text('hello 全部选中');d3.select('#p1').text('hello world');//选择第1个p容器设置文本// 2 绑定数据 datum \ datalet txt = 'hell d3';// let pNodes = d3.selectAll('p').datum( txt );let pNodes = d3.selectAll('p')pNodes.datum( txt );// pNodes.text("dyh d3");pNodes.text((value,index)=>{// console.log(value,index);return index + value;})let txt1 = ['dyh01','dyh02','dyh03','dyh04','dyh05'];let pNodes1 = d3.selectAll('p');pNodes1.data( txt1 ).text((value,index)=>{// console.log(value,index);return index + value;})// 3 数据多于元素对象let p1 = d3.select('#p1');p1.selectAll('p').data(txt1).enter().append('p').text((value,index)=>{console.log(value,index);return value;})// 4 添加属性 attr(attributename,value)d3.select('#p1').attr('dyh','自定义属性');// 5 追加 向父元素内进行追加 参考父级append//往某个元素前面 进行追加  参考父级中某个子元素 insertd3.select("#p1").append('h1').text("我是追加的h1标签").style('color','red');//选择父容器， 调用 insert( 要追加的元素, 参考哪个元素 )d3.select('body').insert('h1','#p1').text('我是追加到#p1前的h1').style('color','blue');// 6 删除 指定d3.select('#p1').remove();// 7 遍历 添加内容 自定义属性let txt2 = ['dd','yy','hh'];// d3.select('#p2').data( txt1 ).attr('a','sss')// d3.select('#p2').data( txt1 ).enter().append('p').attr('a',val=>{return val});let p = d3.select('#p2').selectAll('h1');p.data(txt2).enter().append('h1').text(val=>val).attr('dyh',(val,idx)=>{// console.log(val,idx);return val;})// 8 事件绑定d3.selectAll('p').on('click',function(){console.log(this,d3.select(this),'事件触发了');d3.select(this).style('background','red');//将this转换成d3 this})</script></body>
</html>

基础柱状图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础柱状图</title>
</head><body><div id="container"></div><script src="./d3.v3.min.js"></script><script>//定义初始化的数据let dataset = [100, 50, 33, 80, 110, 60]let width = 300 //svg的宽let height = 300 //svg的高let padding = { left: 40, right: 40, top: 40, bottom: 40 }  //距离svg四周的间距let rectWidth = 30let rectPadding = 10let svg = d3.select('#container')//选中标签.append('svg')//添加svg.attr('width', width)//设置宽高属性.attr('height', height).style('border', '1px solid blue')svg.selectAll('rect').data(dataset)//为rect集合绑定数据.enter().append('rect')//绑定数据以后，还需要执行enter和append保证集合对象和数据统一.attr('width', rectWidth).attr('height', (value, index) => {return value}).attr('x', (value, index) => {//console.log(value,index)//console.log( index * ( rectWidth + rectPadding ) )return index * (rectWidth + rectPadding)}).attr('y', (value, index) => {return height - value}).on('mouseover', function () {d3.select(this).attr('fill', 'red')}).on('mouseout', function () {d3.select(this).attr('fill', 'black')})</script>
</body></html>

比例尺

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>比例尺</title>
</head>
<body><script src="./d3.v3.min.js"></script><script>// 线性比例尺（ 竖直方向 ） | 序数比例尺 （水平方向）//1. 线性比例尺let dataset = [ 0.5, 3, 0.1, 1.2, 4, 2.5 ]//要让数据0.1——4  ——>   0,300的区间      var min = d3.min( dataset )//最小值  0.1var max = d3.max( dataset )//最大值  4//得到一个线性比例尺let linear = d3.scale.linear() //线性比例尺.domain([ min,max ]) //定义区间   x 当x得到 => y的值也就取出来了.range([0,300]) //取值//console.log( linear )console.log( linear( 0.1 ) )console.log( linear( 3 ) )console.log( linear( 4 ) )//300console.log('-------------------------------------')//2. 序数比例尺let course = [ '语文','数学','英语','政治','历史' ]//投放到0，300的区间中//ordinal() 序数比例尺let ordinal = d3.scale.ordinal().domain( course )  //定义区间   x 当x得到 => y的值也就取出来了.rangeRoundBands( [0,400] )//取值console.log( ordinal,'11111' )console.log( ordinal('语文') )console.log( ordinal('数学') )console.log( ordinal('英语') )console.log( ordinal('政治') )console.log( ordinal('历史') )console.log( ordinal.rangeBand() )  //ordinal.rangeBand() 可以理解为300平分数据个数的值</script>
</body>
</html>

坐标系

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>坐标系</title>
</head><body><div id="container"></div><script src="./d3.v3.min.js"></script><script>let dataset = [0.5, 3, 0.1, 1.2, 4, 2.5]let width = 300let height = 300//d3.svg.axis 创建坐标系 let svg = d3.select('#container').append('svg').attr('width', width).attr('height', height).style('border', '1px solid red')//创建线性比例尺let linear = d3.scale.linear()   //擅长做竖直方向 上坐标系 .domain([0, d3.max(dataset)]).range([300, 0])//定义坐标系let axis = d3.svg.axis().scale(linear)//指定比例尺.orient('left') //指定坐标系刻度的方向.ticks(5) //指定刻度的数量//追加坐标系svg.append('g')// group 组的意思.attr('class', 'axis_a').attr('transform', 'translate(50,0)').call(axis)</script><style>.axis_a line,.axis_a path {fill: transparent;stroke: black}</style>
</body></html>

柱状图-坐标系

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>柱状图-坐标系</title><style>.xAxis_a path,.yAxis_a path,.yAxis_a line{fill: none;;stroke: black;/* stroke-width: 1 */}.tick text {font-size: 12px;}</style>
</head><body><div id="container"></div><script src="./d3.v3.min.js"></script><script>//定义初始化的数据let dataset = [100, 50, 33, 80, 110, 60]let course = ['语文', '数学', '英语', '政治', '历史', '化学']let width = 300 //svg的宽let height = 300 //svg的高let padding = { left: 40, right: 40, top: 40, bottom: 40 }  //距离svg四周的间距let rectWidth = 30let rectPadding = 4 //矩形与矩形之间的距离//x轴的比例尺let xScale = d3.scale.ordinal().domain(course).rangeRoundBands([0, width - padding.left - padding.right]) //留出两边距离//y轴的比例尺   let yScale = d3.scale.linear().domain([0, d3.max(dataset)]).range([height - padding.top - padding.bottom, 0])let svg = d3.select('#container').append('svg').attr('width', width).attr('height', height).style('border', '1px solid blue')svg.selectAll('rect').data(dataset)//为rect集合绑定数据.enter().append('rect')//绑定数据以后，还需要执行enter和append保证集合对象和数据统一.attr('width', rectWidth).attr('height', (value, index) => {//console.log( yScale(value),'1111' )//return valuereturn height - padding.top - padding.bottom - yScale(value)}).attr('x', (value, index) => {//console.log(value,index)//console.log( xScale(course[index]) )return xScale(course[index]) + rectPadding}).attr('transform', 'translate( ' + padding.left + ',' + padding.top + ' )').attr('y', (value, index) => {return yScale(value)}).on('mouseover', function () {d3.select(this).attr('fill', 'red')}).on('mouseout', function () {d3.select(this).attr('fill', 'black')})//x坐标体恤let xAxis = d3.svg.axis().scale(xScale).orient('bottom')//y坐标系let yAxis = d3.svg.axis().scale(yScale).orient('left')svg.append('g').attr('class', 'xAxis_a').attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')').call(xAxis)svg.append('g').attr('class', 'yAxis_a').attr('transform', 'translate(' + padding.left + ',' + padding.top + ')').call(yAxis)</script>
</body></html>

常用的柱形图见博客

HTML5-数据可视化学习笔记-进阶之路相关推荐

ECharts数据可视化学习笔记和应用
ECharts数据可视化学习笔记和应用一.概念二.Echarts使用使用步骤三.Echarts-基础配置四.柱状图图表1 五.柱状图图表2 六.折线图1 七.折线图2 八.饼状图1 九.饼形 ...
python气象数据可视化学习笔记6——利用python地图库cnmaps绘制地图填色图并白化
文章目录 1. 效果图 2. cnmaps简介及安装 2.1 写在前面 2.2 cnmaps简介和安装 3. 导入库 4. 定义绘图函数 4.1 使用get_adm_maps返回地图边界 4.2 ax ...
数据可视化学习笔记一——概述
工作准备文章目录工作准备工作内容补充说明地理信息数字化技术 GIS QGis PostGIS PostgreSQL 可视化技术 echarts mapbox three.js [Vue.js ...
QGIS数据可视化学习笔记01——一般的图层样式调整和在地图上添加图表
说明:QGIS数据可视化章节用的数据为QGIS绘制一张地图学习章节的数据,传送门:https://blog.csdn.net/qq_47188967/article/details/1301962 ...
可视化导论 - 第五章时空数据可视化 - 学习笔记
第5章时空数据可视化 5.1 一维标量数据可视化一维标量数据通常用二维坐标图或折线图来可视化. 制作坐标图时要注意: 数据转换对输入数据进行数据转换生成新的变量,可以方便用户更好地观察数据.例如 ...
数据可视化（一）：解构数据可视化——学习笔记
一.数据可视化过程一个完整的数据可视化过程可以分为四个步骤: (1)确定可视化的主题首先得确定数据围绕什么样的主题来组织.具体地说,可以是业务的目标.一个需求.一个问题.比如,信贷行业分析不同信用 ...
python生物数据分析_Python学生物统计-数据可视化-学习笔记5
5.1 作图的重要性在分析一个数据之前, 我们首先要对数据进行检查, 在统计上看一下汇总统计, 比如最大值, 最小值, 中位数, 平均值, 方差, 标准差, 变异系数等等.直方图, 看一下数据的分布 ...
Python数据可视化学习笔记：第一章关联图第四节使用Python绘制一般气泡图
前言声明:这个系列的博文都是我自己学习所得的东西,秉承着每天进步一点点的理念进行学习,我参考的课程是<菊安酱与菜菜的Python机器学习可视化50图>,使用的Python版本为3.6.4 ...
QGIS数据可视化学习笔记00——为什么用QGIS以及QGIS设置中文界面
一.为什么用QGIS? 1.qgis的概念 qgis原称Quantum GIS,是开源的桌面地理信息系统软件. qgis是一款桌面版gis软件,他是基于qt平台使用c++开发出来gis软件. 2.qg ...

HTML5-数据可视化学习笔记-进阶之路

数据可视化

数据可视化的技术

canvas原生技术

canvas的基本概念

绘制图形步骤

路径

颜色的处理

线的处理-开启路径-闭合路径

画圆-太极图案

缩放-变形-状态

线性-径向渐变

阴影

文本-清除画布

Canvas画时钟

绘制图片drawImage

运动的小方框见博客

svg

使用步骤

D3.js

对比echarts、d3和canvas、svg的区别和关系

使用方式

d3js基础

基础柱状图

比例尺

坐标系

柱状图-坐标系

常用的柱形图见博客

HTML5-数据可视化学习笔记-进阶之路相关推荐

最新文章

热门文章