D3.js教程

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"/>


这里，行标记绘制一条线，其属性 x1，y1 指的是起始线点和 x2，y2 指的是结束点. style属性使用笔划和笔划宽度样式设置线条的颜色和粗细.

  • x1 : 这是第一点的x坐标.

  • y1 : 这是第一点的y坐标.

  • x2 : 这是第二点的x坐标.

  • y2 : 这是第二点的y坐标.

  • 笔画 : 该行的颜色.

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

SVG Using D3.js

要使用D3.js创建SVG，请按照下面给出的步骤操作。

Step 1:创建一个容器来保存SVG图像，如下所示。

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

Step 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);

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

Rectangle Element

矩形由<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 Element

圆圈由<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>

Ellipse Element

SVG Ellipse元素由<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>
← 上一节 下一节 →

相关菜鸟教程