数据可视化【二】HTML+CSS+SVG+D3

HTML、CSS和SVG学习实现代码：https://vizhub.com/Edward-Elric233/89185eb96bc64a9d81777873a0ccd0b9
index.html

<!DOCTYPE html>
<html><head><title>Shapes with SVG and CSS</title><link rel="stylesheet" href="./style.css">
</head><body><svg width="960" height="800"><g transform="scale(1.5)"><!--通过上面的函数放大--><circle cx="50" cy="50"r="50"></circle><rect x="100" y="25" width="50" height="50" fill="red"></rect><!--stoke 边界颜色transform 设置g的位置lines 和 path 的区别：lines线段和线段连接的地方是断开的path的连接是圆滑的 stroke-linejoin round设置线连接的地方是圆滑的--><g transform="translate(0,100)" fill="blue" stroke="black"><circle cx="50" cy="50"r="50" stroke-width="5"></circle><rect x="100" y="25" width="50" height="50" fill="red"></rect></g><g transform="translate(100,50)" class="lines"><line x1="100"y1="0" x2="100" y2="100"></line><path fill="none" d="M100 100 L200 100 L100 0"></path></g></g></svg>
</body></html>

index.js

body {margin: 0px;overflow: hidden;font-size: 2em;font-family: manosapce;
}.highlighted {color: red;
}.lines {stroke: black;stroke-width: 5;
}.lines path {stroke: red;stroke-linejoin: round;
}

svg通过在html里面用组件进行绘画得到各种各样的图形。为了方便绘制，可以将他们放在g标签里面，再通过设置transform属性进行移动。

D3学习实现代码：https://vizhub.com/Edward-Elric233/a0996081ad68437aac3bf23612f6347c
index.html

<!DOCTYPE html>
<html><head><title>Let's make a face with D3.js</title><link rel="stylesheet" href="./styles.css"><script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script><!-- find D3 file on UNPKG d3.min.js-->
</head><body><svg width="960" height="500"></svg><script src="./index.js">console.log(d3); //test whether you have imported d3.js or not</script></body></html>

styles.css

body {margin: 0px;overflow: hidden;font-size: 2em;font-family: manosapce;
}.highlighted {color: red;
}.lines {stroke: black;stroke-width: 5;
}.lines path {stroke: red;stroke-linejoin: round;
}

index.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); testconst height = +svg.attr('height');
//+ equals paresFloat()
const width = +svg.attr('width');const g = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`);const circle = g.append('circle');circle.attr('r', height / 2).attr('fill', 'yellow').attr('stroke', 'black');const eyeSpacing = 100;
const eyeYOffset = -80;
const eyeRadius = 30;
const eyebrowWidth = 50;
const eyebrowHeight = 20;
const eyebrowYOffset = -60;
const mouthYOffset = -15;const eyesG = g.append('g').attr('transform', `translate(0, ${eyeYOffset})`);const leftEye = eyesG.append('circle').attr('r', eyeRadius).attr('cx', -eyeSpacing);const rightEye = eyesG.append('circle').attr('r', eyeRadius).attr('cx', eyeSpacing);const eyebrowG = eyesG.append('g').attr('transform', `translate(0, ${eyebrowYOffset})`);eyebrowG.transition().duration(2000).attr('transform', `translate(0, ${eyebrowYOffset-10})`).transition().duration(1000).attr('transform', `translate(0, ${eyebrowYOffset})`);const leftEyebrow = eyebrowG.append('rect').attr('width', eyebrowWidth).attr('height', eyebrowHeight).attr('x', -eyeSpacing - eyebrowWidth / 2);const rightEyebrow = eyebrowG.append('rect').attr('width', eyebrowWidth).attr('height', eyebrowHeight).attr('x', eyeSpacing - eyebrowWidth / 2);const mouth = g.append('path').attr('d', d3.arc()({innerRadius: 100,outerRadius: 120,startAngle: Math.PI / 2,endAngle: Math.PI * 3 / 2})).attr('transform', `translate(0, 50)`).transition().duration(2000).attr('d', d3.arc()({innerRadius: 120,outerRadius: 140,startAngle: Math.PI / 2,endAngle: Math.PI * 3 / 2})).transition().duration(1000).attr('d', d3.arc()({innerRadius: 100,outerRadius: 120,startAngle: Math.PI / 2,endAngle: Math.PI * 3 / 2}));

使用d3其实是通过d3的函数绘制svg图形，不过因为d3提供了方便的接口，使得绘制更加方便。

想要绘制什么图形可以到D3官网查询API。

而且d3绘制的图形通过使用transition函数还能变形。以上面的笑脸为例可以让笑脸进行变化。虽然程度有限。

数据可视化【二】HTML+CSS+SVG+D3相关推荐

ECharts数据可视化(二)
本人学习视频为黑马程序员,视频连接为:黑马程序员 Echarts-介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器 ...
python爬虫豆瓣读书top250+数据清洗+数据库+Java后端开发+Echarts数据可视化(二)
之前的博客已经写了python爬取豆瓣读书top250的相关信息,接下来继续看如何清洗数据. 如果有没看懂的或是不了解上一部分说的是什么内容的,请看https://blog.csdn.net/qq_4 ...
Python数据分析-数据可视化(二)
欢迎大家访问个人博客:https://jmxgodlz.xyz 文章目录前言 Matplotlib 折线图格式调整标签线条颜色线条形状折点样式线条透明度前言看到有些论文插图十分简洁美观 ...
python读取csv数据画直方图_Python数据可视化（Pygal、svg、csv、Bar、Line）
一.pygal(图表类型Bar) 将使用Python可视化包Pygal来生成可缩放的矢量图形文件 pygal官方文档:[www.pygal.org/en/stable/](http://www.pyg ...
数据可视化(二)：犯罪案件分析
犯罪庭审案件分析通过爬取山东庭审公开网(tszb.sdcourt.gov.cn)案件信息,将山东省各级法院受理刑事案件进行展示. 案件时间:2018/6/22--2020/1/17 共计案件1852 ...
数据可视化原理与实例
一.基于Web的数据可视化基础 1.1数据可视化概述 1.1.1数据可视化是大数据技术体系的重要组成数据的采集.提取和理解是人类感知和认识世界的基本途径之一,数据可视化为人类洞察数据的内涵.理解数据 ...
数据可视化开源工具软件
数据可视化工具用于通过图形.图表.表格.地图和其他详细的视觉对象来表示信息. 它们通常将数据呈现和分析结合起来,以帮助专业人员在数据驱动领域(如工程.数据科学和业务分析)做出更明智的决策. 选择正确的 ...
11个免费的数据可视化工具推荐
数据可视化之所以流行,不仅是因为它简化了我们查看复杂数据的方式,更是因为数据可视化可以加快我们获取数据信息的速度. 本文专门为您列出了11个免费的数据可视化工具,帮助您快速掌握数据可视化技能. 1.即 ...
数据可视化及推荐系统
信息图表工具: Google Chart API(统计数据,自动生成图片,简单,在线查看) D3(最流行之一,网页作图,互动图形,javascript,对象,对象的调用,复杂图表,voronoi,树状 ...

数据可视化【二】HTML+CSS+SVG+D3

数据可视化【二】HTML+CSS+SVG+D3相关推荐

最新文章

热门文章