「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。
D3(Data Driven Documents数据驱动)
-
SVG(Scalable Vector Graphics,可缩放矢量模型)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg width="960" height="500" id="mainsvg" class="svgs"></svg> <script> let mainsvg = d3.select('.svgs') let maingrop = mainsvg .append('g') .attr('transform',`translate(${100},${100})`) let circle = maingrop .append('circle') .attr('stroke','black') .attr('r','66') .attr('fill','yellow'); </script> </body> </html>- 这里显示一个圆圈
- HTML ->DOM
- DOM ->Document Object Model
- 对于根节点的操作会影响到子节点
- 最常用的父节点中的
- Axis可封装成一个group
- Legend(图例)可封装成一个group
- Data-Drive Document
- Document Object Model
