日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2023/11/30 HTML 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 数据可视化【二】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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。