*

SVGとは

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

SVGとはScalable Vector Graphicsの頭文字をとったもので、
ベクトルベースのグラフィックを描画するためのマークアップ言語です。
マークアップ言語といえばHTML/XMLを思い浮かべますが、SVGはXMLの
一種なのでXMLの書式が使えます。

SVGには図形に対応した要素が用意されていて、描画に必要な座標値などを
属性で指定し、SVHはHTMLと同じようにスタイルシートで使えます。
CSSを使いD3.jsで生成されるグラフのスタイルを色々と変更できます。

D3.jsで表示されているグラフはSVGによって生成されています。
D3.js自体にはグラフィックスを描画する機能はなく、HTML上に
配置されたSVG要素を操作することで様々なことを表現しています。

SVGではベクトルベースでグラフィックを作成します。
ベクトルベースというのは座標点を組み合わせて書く方法です。
対照的なものはピクセルベースがあります。
PhotoShopはグラフィックを点(ピクセル)の組合せとして扱う物を示します。

ベクトルベースの場合、少ないデータで図形を描画でき、解像度が変わったり
図形を拡大しても線が綺麗に表示されます。これらがメリットです。

デメリットは、複雑な図形だと座標点が多くなり図形を表示するのに
時間がかかります。

実際にSVGを使い図形を表示します。
以下のサンプルコードを実行すると・・・

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

スポンサードリンク

関連記事

D3.js

D3.js サーバーのログを読み込んで、OSのシェアを表示してみる

D3.jsを利用して、サーバーログを読出して、情報を得ることができます。 サンプルコードの実行

記事を読む

D3.js

D3.jsでメソッドチェーンで独自処理をする

メソッドチェーンに渡されている要素について独自の処理を行いたいとき、call()メソッドです。cal

記事を読む

D3.js

CSVファイルからデータを読み込んで縦棒グラフを表示してみる

CSVファイルからデータを読み込んで表示するものを今回作成します。 サンプルコードの実行結果は

記事を読む

D3.js

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

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

記事を読む

D3.js

フィッシュアイプラグインを使ってみる

今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利

記事を読む

D3.js

折れ線グラフを作ってみる

棒グラフ、円グラフと同じくらいよく見るのが折れ線グラフです。体重や為替相場など継続的に変化するデータ

記事を読む

D3.js

正円とパスを描画する

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

記事を読む

D3.js

パックレイアウトで人口を表す

今回はパックレイアウトを使い日本の人口を表示します。 サンプルコードの実行結果はこちら

記事を読む

D3.js

グループと図形移動

複数のSVG用をまとめて扱う場合に必要なものはグループ化です。 SVGではg要素を使って要素を囲み

記事を読む

D3.js

データの削除

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

記事を読む

スポンサードリンク

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 ↑