HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

D3.js - SVG 简介

SVG 代表可缩放矢量图形。SVG 是一种基于 XML 的矢量图形格式。它提供了绘制不同形状的选项，例如线条、矩形、圆形、椭圆形等。因此，使用 SVG 设计可视化效果可为您提供更多功能和灵活性。

SVG 的功能

SVG 的一些显著功能如下 −

  • SVG 是一种基于矢量的图像格式，并且是基于文本的。
  • SVG 的结构与 HTML 相似。
  • SVG 可以表示为 文档对象模型。
  • SVG 属性可以指定为属性。
  • SVG 应该具有相对于原点 (0, 0) 的绝对位置。
  • SVG 可以按原样包含在 HTML 文档中。

一个最小示例

让我们创建一个最小的 SVG 图像并将其包含在 HTML 文档中。

步骤 1 − 创建 SVG 图像并将宽度设置为 300 像素，高度设置为 300 像素。

<svg width = "300" height = "300">

</svg>

此处，svg 标签启动 SVG 图像，其具有宽度和高度属性。SVG 格式的默认单位是 像素。

步骤 2 − 创建一条从 (100, 100) 开始到 (200, 100) 结束的线，并为该线设置红色。

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

此处，line标签绘制一条线，其属性x1, y1表示起点，x2, y2表示终点。style属性使用stroke和stroke-width样式设置线条的颜色和粗细。

  • x1 − 这是第一个点的x坐标。

  • y1 − 这是第一个点的y坐标。

  • x2 − 这是第二个点的x坐标。

  • y2 −这是第二个点的 y 坐标。

  • stroke − 线条的颜色。

  • stroke-width − 线条的粗细。

步骤 3 − 创建 HTML 文档"svg_line.html"并集成上述 SVG，如下所示 −

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

上述程序将产生以下结果。

使用 D3.js 的 SVG

要使用 D3.js 创建 SVG，请按照以下步骤操作。

步骤 1 − 创建一个容器来保存 SVG 图像，如下所示。

<div id = "svgcontainer"></div>

步骤 2 − 使用 select() 方法选择 SVG 容器，并使用 append() 方法注入 SVG 元素。使用 attr() 和 style() 方法添加属性和样式。

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
    .append("svg").attr("width", width).attr("height", height);

步骤 3 − 类似地，在 svg 元素内添加 line 元素，如下所示。

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

完整代码如下 −

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

上述代码产生以下结果。

矩形元素

矩形由<rect>标签表示，如下所示。

<rect x = "20" y = "20" width = "300" height = "300"></rect>

矩形的属性如下 −

  • x −这是矩形左上角的 x 坐标。

  • y − 这是矩形左上角的 y 坐标。

  • width − 这表示矩形的宽度。

  • height − 这表示矩形的高度。

SVG 中的简单矩形定义如下。

<svg width = "300" height = "300">
   <rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
</svg>

可以按照下面所述动态创建相同的矩形。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

上述代码将产生以下结果。

圆形元素

圆形由 <circle> 标签表示，如下所述。

<circle cx = "200" cy = "50" r = "20"/>

圆形的属性如下 −

  • cx − 这是圆心的 x 坐标。

  • cy −这是圆心的 y 坐标。

  • r − 这表示圆的半径。

下面描述了 SVG 中的一个简单圆圈。

<svg width = "300" height = "300">
<circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

可以按照下面所述动态创建相同的圆圈。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

上述代码将产生以下结果。

椭圆元素

SVG 椭圆元素由 <ellipse> 标签表示，如下所述。

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

椭圆的属性如下 −

  • cx −这是椭圆中心的 x 坐标。

  • cy − 这是椭圆中心的 y 坐标。

  • rx − 这是圆的 x 半径。

  • ry − 这是圆的 y 半径。

下面描述了 SVG 中的一个简单椭圆。

<svg width = "300" height = "300">
    <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>

可以像下面这样动态创建相同的椭圆，

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

上述代码将产生以下结果。

❮ 上一节 下一节 ❯