D3js-svg-transformation
提供：Dev Guides
D3.js-SVG変換
SVGは、単一のSVG形状要素またはSVG要素のグループを変換するオプションを提供します。 SVG変換は、 Translate、Scale、Rotate および Skew をサポートしています。 この章で変革を学びましょう。
SVG変換の概要
SVGは、変換をサポートする新しい属性 transform を導入します。 可能な値は次の1つ以上です。
- Translate -2つのオプションがあります。 tx はx軸に沿った移動を指し、 ty はy軸に沿った移動を指します。 例-translate（30 30）の場合。
- Rotate -3つのオプションが必要です。 angle は回転角度、 cx および cy はxおよびy軸の回転の中心を示します。 cx および cy が指定されていない場合、デフォルトで座標系の現在の原点になります。 例-rotate（60）の場合。
- Scale -2つのオプションがあります。 sx はx軸に沿ったスケーリング係数を指し、 sy はy軸に沿ったスケーリング係数を指します。 ここで、 sy はオプションであり、指定されていない場合は sx の値を取ります。 例-scale（10）の場合。
- * Skew（SkewXおよびSkewY）-単一のオプションが必要です。 *skew-angle は、SkewXの場合はx軸に沿った角度、SkewYの場合はy軸に沿った角度を指します。 例-skewx（20）の場合。
次のように説明されている翻訳付きのSVG長方形の例-
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(30 30)">
</rect>
</svg>
</body>
</html>上記のコードは次の結果をもたらします。
スペースを区切りとして使用して、単一のSVG要素に対して複数の変換を指定できます。 複数の値が指定されている場合、変換は指定された順序で1つずつ順番に適用されます。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(60 60) rotate(45)">
</rect>
</svg>
</body>
</html>上記のコードは次の結果をもたらします。
変換は、SVGグループ要素にも適用できます。 これにより、以下で説明するように、SVGで定義された複雑なグラフィックを変換できます。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
</body>
</html>上記のコードは次の結果をもたらします。
最小限の例
SVG画像を作成するには、変換を使用してスケーリングおよび回転を試み、以下の手順に従います。
- ステップ1 *-SVG画像を作成し、幅を300ピクセル、高さを300ピクセルに設定します。
<svg width = "300" height = "300">
</svg>- ステップ2 *-SVGグループを作成します。
<svg width = "300" height = "300">
<g>
</g>
</svg>- ステップ3 *-長さ60および高さ30の長方形を作成し、緑色で塗りつぶします。
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
</g>
</svg>- ステップ4 *-半径30の円を作成し、赤色で塗りつぶします。
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>- ステップ5 *-変換属性を追加し、以下に示すように変換と回転を追加します。
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>- ステップ6 *-HTMLドキュメント「svg_transform_rotate_groupl」を作成し、下記の説明に従って上記の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">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
</div>
</body>
</html>上記のコードは次の結果をもたらします。
D3.jsを使用した変換
D3.jsを使用してSVGを作成するには、以下の手順に従います。
- ステップ1 *-以下で説明するように、SVGイメージを保持するコンテナを作成します。
<div id = "svgcontainer"></div>- ステップ2 *-以下で説明するようにSVG画像を作成します。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);- ステップ3 *-SVGグループ要素を作成し、変換および回転属性を設定します。
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");- ステップ4 *-SVG長方形を作成し、グループ内に追加します。
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")- ステップ5 *-SVGサークルを作成し、グループ内に追加します。
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")完全なコードは次のとおりです-
<!DOCTYPE html>
<html lang = "en">
<head>
<title>SVG rectangle</title>
<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);
var group = svg.append("g")
.attr("transform", "translate(60, 60) rotate(30)");
var rect = group.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")
</script>
</div>
</body>
</html>上記のコードは次の結果をもたらします。
変換ライブラリ
D3.jsは、手動で変換属性を作成せずに変換を管理するための個別のライブラリを提供します。 すべてのタイプの変換を処理するメソッドを提供します。 メソッドには、* transform（）、translate（）、scale（）、rotate（）などがあります。 次のスクリプトを使用して、Webページに *d3-transform を含めることができます。
<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>上記の例では、変換コードは次のように記述できます-
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);