D3.js-SVGの概要

SVGは Scalable Vector Graphics の略です。 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 は終了点を参照します。スタイル属性は、 stroke および stroke-width スタイルを使用して線の色と太さを設定します。

x1 -これは最初の点のx座標です。
y1 -これは最初の点のy座標です。
x2 -これは、2番目のポイントのx座標です。
y2 -これは2番目の点のy座標です。
stroke -線の色。
stroke-width -線の太さ。

ステップ3 *-以下に示すように、HTMLドキュメント「svg_linel」を作成し、上記の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座標です。
幅-これは長方形の幅を示します。
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> タグで表されます。

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

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

D3js-introduction-to-svg

目次

D3.js-SVGの概要

SVGの機能

最小限の例

D3.jsを使用したSVG

長方形要素

サークル要素

楕円要素