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

D3.jsでSVG図形を作成してみる

ページ内にdiv要素の中にsvg要素およびSVG図形の1つであるrect要素を
生成します。svg要素にはスタイルシートを設定します。

svg要素を生成する

svg要素を生成対象となるdiv要素を指定しなければなりません。
D3.jsでじゃ、select()メソッドを使い要素を指定します。
d3.jsで使用されるメソッドは全てd3という名前のオブジェクトに
はいっています。
たとえばID名「sample」のdiv要素を指定するなら下記のように書きます。

d3.select(“#sample”)

select()メソッドの引数にCSSと同じセレクタを指定します。
JavaScriptならdocument.querySelector()の引数と同じです。
jQueryなら$( )です。select()メソッドはセレクタに一致した
最初の要素だけを対象にします。同じCSSクラスを持つ複数の要素が
ある場合でも、最初に見つかった1つの要素しか対象になりません。

select()メソッドでdiv要素を特定したら、append()メソッドを使い、
svg要素を生成します。append()メソッドは引数に指定した要素を
追加します。このとき、指定された要素の内側に追加されます。

rect要素を生成する

d3.select()でdiv要素を指定し、append()でsvg要素を追加することは
かわりません。append(“svg”)の次の行にappend(“rect”)を書きます。
append()を使うと、要素の中に指定した要素が生成されます

それと、操作対象とする要素を変数に代入することもあります。

var s = d3.select(“#sample”) //ID sampleを指定

複数のrect要素を生成する

1つのsvg要素の中にrect要素を生成します。
下記のサンプルコードの実行結果のページをひらき
Chrome,IEならF12ボタンを押し、デベロッパーツールを開くと
svg要素の中に2つのrect要素が生成されているのが確認できます。

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

コメント

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