スポンサーリンク
スポンサーリンク

図形の位置やサイズを指定する

前回は、svg要素、rect要素を生成しました。
ですが、SVGでは要素を生成しただけでは、何も表示されません。
図形の位置やサイズを指定しなければなりません。
D3.jsで図形の位置やサイズを指定するには、
attr()メソッドを使いします。attr()メソッドだけで、
全ての要素の色、サイズを指定できます。D3.jsでは
多くのメソッドを覚える必要はないです。
その変わり操作するsvg要素の属性名を知らないといけません。

rect要素には、以下の属性があります。

属性 説明
x X座標
y Y座標
width
height 高さ

上記の属性名と設定する値をattr()メソッドで指定します。
attr()メソッドは第1引数に属性名、第2引数に設定値を
指定します。たとえば、y属性に値を100を指定するなら
下記のように書きます。

attr(“y”,100)

属性名は「”」と「”」で囲んで文字列を指定し、設定する内容は
属性によって異なり、数値、文字列になります

特定の図形を操作したい

特定のrect要素を操作したい場合もあるかと思います。
この場合はrect要素にid名を指定しておいて、d3.select()を使ってID名を指定します。
後はattr()メソッドを使って属性値を設定します。同様に、クラス名を
指定しておくと、複数の要素を操作することができます。

スタイルや属性をまとめて指定する

attr()メソッドとstyle()メソッドは、
引数にオブジェクトリテラル形式
({属性名:値,…..})を指定することができます。
今回のサンプルコードをオブジェクトリテラルに形式に
書き換えると下記のようになります。属性名は”x”のように
文字列で指定することできます。
スタイルシートプロパティ名に「-」ハイフンが含まれる場合は
文字列で指定します。

d3.select(“#sample”)
.attr({
x: “50px”,
y: “50px”,
width: “100px”,
height: “60px”,

})

attr()メソッドの他の使い道

D3.jsではグラフを動的に変化させたいときもattr()メソッドが大事です。
D3.jsではtransition()メソッドをメソッドチェーンに挟み込むだけで
アニメーションさせることができます。そのとき、アニメーションの
初期値と終了値をattr()メソッドで指定します。

サンプルコードのコメントアウトを外して確認すると分かりますが、
メソッドチェーンにtransition(),duration()を追加して四角形を
アニメーションさせています。
四角形の横幅を2秒かけて変化させています。
アニメーションの速度はduration()メソッドで設定できます。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました