D3.js-SVGの概要

SVGは Scalable Vector Graphics。SVGは、XMLベースのベクターグラフィック形式です。線、長方形、円、楕円などのさまざまな形状を描画するオプションを提供します。したがって、SVGを使用して視覚化を設計すると、より強力で柔軟性が高まります。

SVGの機能

SVGの顕著な特徴のいくつかは次のとおりです-

SVGはベクターベースの画像形式であり、テキストベースです。
SVGは構造がHTMLに似ています。
SVGは次のように表すことができます Document object model。
SVGプロパティは属性として指定できます。
SVGは、原点（0、0）を基準にした絶対位置を持つ必要があります。
SVGは、HTMLドキュメントにそのまま含めることができます。

最小限の例

最小限のSVG画像を作成し、それをHTMLドキュメントに含めましょう。

Step 1 − SVG画像を作成し、幅を300ピクセル、高さを300ピクセルに設定します。

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

</svg>

ここでは、 svgタグはSVG画像を開始し、属性として幅と高さを持ちます。SVG形式のデフォルトの単位はpixel。

Step 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 −これは2番目の点のx座標です。
y2 −これは2番目の点のy座標です。
stroke −線の色。
stroke-width −線の太さ。

Step 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を作成するには、以下の手順に従います。

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 −同様に、 line 内部の要素 svg 以下に示す要素。

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>

上記のコードは次の結果をもたらします。