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>

上述程式碼將產生以下結果。

列印頁面
上一頁
下一頁
廣告