当前位置：首页 > article >正文

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

article 2024/11/19 6:30:51

在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>