D3基础：绘制圆形、椭圆形、多边形、线、路径、矩形

在D3.js中，可以通过SVG元素来创建各种几何图形。以下是D3.js中常用的几何图形及其简单的创建方法：

在这里插入图片描述

1. 圆形 (Circle)

圆形是最基本的形状之一，可以通过<circle>标签来创建。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body><svg width="200" height="200"></svg><script>const svg = d3.select("svg");svg.append("circle").attr("cx", 100) // 圆心的X坐标.attr("cy", 100) // 圆心的Y坐标.attr("r", 50)   // 半径.attr("fill", "blue"); // 颜色</script>
</body>
</html>

2. 椭圆 (Ellipse)

椭圆通过<ellipse>标签来创建，它允许设置不同的宽度和高度。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body><svg width="200" height="200"></svg><script>const svg = d3.select("svg");svg.append("ellipse").attr("cx", 100) // 中心点的X坐标.attr("cy", 100) // 中心点的Y坐标.attr("rx", 80)  // 水平半径.attr("ry", 50)  // 垂直半径.attr("fill", "green"); // 颜色</script>
</body>
</html>

3. 矩形 (Rectangle)

矩形使用<rect>标签来创建，可以通过设置width和height属性来调整其大小。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body><svg width="200" height="200"></svg><script>const svg = d3.select("svg");svg.append("rect").attr("x", 50)   // 左上角的X坐标.attr("y", 50)   // 左上角的Y坐标.attr("width", 100) // 宽度.attr("height", 100) // 高度.attr("fill", "red"); // 颜色</script>
</body>
</html>

4. 线 (Line)

线可以通过<line>标签来定义，需要指定起始点和结束点的坐标。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body><svg width="200" height="200"></svg><script>const svg = d3.select("svg");svg.append("line").attr("x1", 50)  // 起始点X坐标.attr("y1", 50)  // 起始点Y坐标.attr("x2", 150) // 结束点X坐标.attr("y2", 150) // 结束点Y坐标.attr("stroke", "black") // 颜色.attr("stroke-width", 2); // 线宽</script>
</body>
</html>

5. 多边形 (Polygon)

多边形可以通过<polygon>标签来创建，需要提供一系列的顶点坐标。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body><svg width="200" height="200"></svg><script>const svg = d3.select("svg");const points = "50,150 100,50 150,150"; // 三角形的三个顶点svg.append("polygon").attr("points", points).attr("fill", "purple"); // 颜色</script>
</body>
</html>

在这里插入图片描述

6. 路径 (Path)

路径是最灵活的图形之一，可以通过<path>标签和d属性来定义复杂的形状。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body><svg width="200" height="200"></svg><script>const svg = d3.select("svg");const pathData = "M10,10 H90 V90 H10 Z"; // 定义一个正方形svg.append("path").attr("d", pathData).attr("fill", "orange"); // 颜色</script>
</body>
</html>