数据可视化【二】HTML+CSS+SVG+D3
生活随笔
收集整理的這篇文章主要介紹了
数据可视化【二】HTML+CSS+SVG+D3
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML、CSS和SVG學習實現代碼：https://vizhub.com/Edward-Elric233/89185eb96bc64a9d81777873a0ccd0b9
index.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
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 到了后期，亚索6还是德玛6？
- 下一篇： 数据可视化【三】基本概念