*

グループと図形移動

公開日: : 最終更新日:2016/01/25 D3.js ,

複数のSVG用をまとめて扱う場合に必要なものはグループ化です。
SVGではg要素を使って要素を囲みます。グループ化すると要素の
スタイルや位置を纏めて扱うことができます。g要素のスタイルは
内包する要素にも継承されます。

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

まとめて位置を調整する

g要素によりグループ化するメリットは、スタイルの指定よりも、
纏めて位置を調整できることです。D3.jsでは目盛りを表示することが
多いので、目盛りの線とラベルをグループ化して位置を調整することが
あります。

位置を調整する場合、g要素にtransform属性を指定します。
transform属性に下記の機能を指定できます。

機能 説明
translate(tx,ty) 相対的に位置を移動。例:横方向に20px、縦方向にー50px移動→translate(20px,-50px)
scale(s),scale(sx,sy) 拡大・縮小 例:横3倍、縦5倍→scale(3,5)
rotate(d),rotate(d,cx,cy) 回転。例反時計回りに60度回転→rotate(-60)

スポンサードリンク

関連記事

D3.js

プレーンテキストを読み込む

プレーンテキストとは古くからある形式です。 プレーンテキストは、データフォーマットなどが 何もな

記事を読む

D3.js

d3.jsでJSONファイルを読み込む

JSON形式は複雑なXML形式と比べてシンプルで、データ容量も少なくて すむので、ウェブでよく利用

記事を読む

D3.js

正円とパスを描画する

次は正円を描画します。正円を描画するには、circle用を使い、 下記の表の属性を指定することで正

記事を読む

D3.js

ヒートマップを作成する

ヒートマップはウェブページで多くクリックされた箇所や、地面や人体の温度変化を把握したいときに使われま

記事を読む

D3.js

折れ線グラフの縦方向の動きを分かりやすくする

縦方向の表示を2倍に、目盛り(縦、横軸)を表示する グラフの変化を大きく見せるために縦方向の表示を

記事を読む

D3.js

D3.jsでデータを変更する

前回の記事で、横棒グラフを表示しました。 今回は、ボタンを押したら動的にデータを変更して、 その

記事を読む

D3.js

読み込んだCSVファイルのヘッダー名が日本語だったら

TSV,CSVファイルのヘッダー名が英語であるとは限りません。 日本語で書かれたりすることもありま

記事を読む

D3.js

データの削除

データの削除処理を書いていきます。前回の記事のサンプルコードだとデータ数と要素数が一致するときのみ適

記事を読む

D3.js

フォースレイアウト

D3.jsでは、フォースレイアウトを作成する機能も用意されています。フォースレイアウトは予めノードと

記事を読む

D3.js

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

ページ内にdiv要素の中にsvg要素およびSVG図形の1つであるrect要素を 生成します。svg

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑