*

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

公開日: : 最終更新日: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

ヒストグラムを作成する

ヒストグラムはデータの分布状況を調べるのに便利です。D3.jsではヒストグラムを表示するためのレイア

記事を読む

D3.js

D3.jsって何?

D3.jsとは、データを視覚的に表現するためのJavaScriptライブラリです。 D3.jsが表

記事を読む

D3.js

D3.jsでTSV(タブ区切りデータ)形式のファイルを読み込む

D3.jsでデータとデータがタブコードで区切られたファイル形式である TSV形式も扱う事ができます

記事を読む

D3.js

円グラフに数値とテキストを加えてみる

円グラフの中央にテキストを表示する 円グラフの中に文字を表示してみます。円グラフ中央に合計値を表示

記事を読む

D3.js

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

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

記事を読む

D3.js

積み上げ棒グラフ

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

記事を読む

D3.js

D3.jsのデータと要素の対応

D3.jsがどのようにして読み込んだデータと表示する要素を 対応させているかを書いていきます。

記事を読む

D3.js

散布図にグリッドを表示してみる

目盛りの表示は何度もしました。散布図でも縦軸、横軸を表示しました。 今回は、グリッド(マス目)を表

記事を読む

D3.js

CSVファイルからデータを読み込んで、アニメーションも付けて散布図を表示してみる

タイトルの通りです。CSVファイルを読み込んで、散布図を表示します。今回の記事の後半部分では、読み込

記事を読む

D3.js

外部ファイルを読み込んで円グラフを表示させる

CSVデータを読み込んでグラフを表示させてみます。 サンプルコードの実行結果はこちら

記事を読む

スポンサードリンク

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 ↑