*

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では折れ線グラフを直線で表示するのではなく、曲線、階段状に表示することもできます。D3.j

記事を読む

D3.js

世界地図を表示する

地図のデータ形式にはいろいろなものがありますが、多くの地図データはshape形式(.shp)です。こ

記事を読む

D3.js

地球を表示する

D3.jsでは投影方法を指定できるので、前回使用した世界地図のデータを利用して球体にマッピングして、

記事を読む

D3.js

日本の地図データ(国土数値情報)を使い、地図を表示する

世界地図を表示したので、今回は日本国内の地図を表示します。サンプルコードにコメントを付しましたので、

記事を読む

D3.js

図形のスタイルを指定する

D3.jsで図形の属性はattr()メソッドでしました。 図形のスタイルはどう指定すればいいのか。

記事を読む

D3.js

D3.jsの基本的な流れ

D3.jsで作成するグラフのプログラムの構造は 下記のように考えます。 1.データの読み込み

記事を読む

D3.js

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

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

記事を読む

D3.js

積み上げ棒グラフ

D3.jsでは積み上げ棒グラフもあります。積み上げ棒グラフはグループ化のg要素を使い、その中に、re

記事を読む

D3.js

散布図でツールチップを表示してみる

グリッド上に配置されている円「●」にマウスカーソルがのったとき、ツールチップを表示します。グラフ上で

記事を読む

D3.js

D3.jsとrect要素を使い四角形を表示する

タイトルの通り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 ↑