*

四角形・角丸四角形を描画する

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

SVGは図形を表す要素を指定することで描画を実行します。
SVGは下記の表に示す図形要素があります。

要素 説明
rect 四角形・角丸四角形
circle 正円
ecllipse 楕円形
line 直線
polyline 連続直線
polygon 多角形
path パス(複雑な図形を描画)
text 文字

D3.jsではすべての図形要素を使うことはまずないです。
使いそうなのは以下のものです。
1.rect  四角形・角丸四角形
2.circle 正円
3.path  パス(複雑な図形を描画)
4.text  文字

rect要素を使い、四角形・角丸四角形を描画する

rect要素は下記の表の属性を指定することで四角形を描画できます、
D3.jsでもこれらの属性値を設定することで四角形を描画します。

属性 説明
x X座標 省くと0
y Y座標 省くと0
width 横幅
height 高さ
rx 横方向の角丸半径
ry 縦方向の角丸半径

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

スポンサードリンク

関連記事

D3.js

世界地図を表示する

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

記事を読む

D3.js

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

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

記事を読む

D3.js

ヒストグラムの表示データの範囲を指定

前回のヒストグラムの記事で点数の範囲を10点刻みではなく5点、20点など任意の範囲で表示できるように

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

縦棒グラフに目盛りを表示してみる

縦棒グラフにグラフの目盛りを表示します。まずは目盛りのスタイルをHTMLファイル内でしてします。必要

記事を読む

D3.js

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

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

記事を読む

D3.js

マウスイベントでグラフの色を変更する

前回のまでの記事で、HTML上にあるボタンをクリックして グラフを変化させました。D3.jsではS

記事を読む

D3.js

2次元配列のデータを読み込んで、折れ線グラフを表示する

2次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。 サン

記事を読む

D3.js

SVGとは

SVGとはScalable Vector Graphicsの頭文字をとったもので、 ベクトルベース

記事を読む

スポンサードリンク

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 ↑