Categories
D3.js教程

D3.js-SVG简介

D3.js-SVG简介


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

SVG的功能

SVG的一些显着特征如下-

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

最小的例子

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

步骤1-创建一个SVG图像,并将宽度设置为300像素,将高度设置为300像素。

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

</svg>

在这里, svg标签启动了SVG图像,并且具有width和height作为属性。 SVG格式的默认单位是pixel

步骤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表示终点。样式属性使用笔触笔触宽度样式设置线条的颜色和粗细。

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

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

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

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

  • stroke-线条的颜色。

  • 笔划宽度-线的粗细。

步骤3-创建一个HTML文档“ svg_line.html”,并集成上述SVG,如下所示-

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

   
      <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"></line>
         </svg>
      </div>
      <p></p>
      <p></p>
   

上面的程序将产生以下结果。

SVG使用D3.js

要使用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);

完整的代码如下-

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

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

上面的代码产生以下结果。

矩形元素

矩形由<rect>标记表示,如下所示。

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

矩形的属性如下-

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

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

  • 宽度-这表示矩形的宽度。

  • 高度-这表示矩形的高度。

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

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

可以如下所述动态创建相同的矩形。

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

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

上面的代码将产生以下结果。

圆元素

圆由<circle>标记表示,如下所述。

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

圆的属性如下-

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

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

  • r-这表示圆的半径。

SVG中的一个简单圆圈如下所述。

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

可以如下所述动态创建相同的圆。

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

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

上面的代码将产生以下结果。

椭圆元素

SVG Ellipse元素由<ellipse>标签表示,如下所述。

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

椭圆的属性如下-

  • 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"></ellipse>
</svg>

可以如下动态创建相同的椭圆,

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

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

上面的代码将产生以下结果。

error: 内容受到保护 !!