数据可视化【二】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}));