*

正円とパスを描画する

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

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

属性 説明
cx 円の中心のX座標 省くと0
cy 円の中心のY座標 省くと0
r 円の半径

パスを描画する

D3.jsでよく利用するのが、rect要素、circle要素、それと今回の
記事で触れるpath要素です。path要素を使えばどのような図形でも
描くことができます。四角形・円もrect要素、circle要素と同じように
path要素で描画できます。path要素で扱う属性は「d」属性のみです。
pathlength属性とかありますが使用しません。

SVGで複雑な図形を描画する場合、d属性のパスデータに命令と座標を
セットで設定します。命令と座標がセットになっています。
座標値は「,」(カンマ)で区切って表記しますが、
半角スペースで区切っても大丈夫です。

d属性で指定できる命令と座標値

命令 座標値
移動に関する命令
M 絶対X座標,絶対Y座標
m 相対X座標,相対Y座標
path制御に関する命令
Zまたはz pathを閉じる
直線描画に関する命令
L 絶対X座標,絶対Y座標
l 相対X座標,相対Y座標
曲線描画に関する命令(3次ベジエ曲線)
C 絶対X座標1,絶対Y座標1,絶対X座標2,絶対Y座標2,・・・・・
c 相対X座標1,相対Y座標1,相対X座標2,相対Y座標2,・・・・・
楕円弧に関する命令
A 横半径,縦半径,回転角度,長弧フラグ1,短弧フラグ,絶対X座標,絶対Y座標
a 横半径,縦半径,回転角度,長弧フラグ1,短弧フラグ,相対X座標,相対Y座標

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

スポンサードリンク

関連記事

D3.js

図形の位置やサイズを指定する

前回は、svg要素、rect要素を生成しました。 ですが、SVGでは要素を生成しただけでは、何も表

記事を読む

D3.js

D3.jsで外部データを読み込む

前回までは、予めプログラム内に書かれた数値を もとにして棒グラフを表示しました。 実際にD3.j

記事を読む

D3.js

地球を表示する

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

記事を読む

D3.js

散布図を作成

散布図は2つの項目の関係性を調べるのに利用します。。D3.jsでは散布図を表示すための専用のレイアウ

記事を読む

D3.js

散布図のデータに応じて目盛りを調整する

散布図に目盛りを表示してみます。 サンプルコードの実行結果はこちら [

記事を読む

D3.js

多機能アニメーション付棒グラフを作ってみる

たいそうな記事のタイトルですが、過去7記事で書いたことを まとめた棒グラフを作成します。 サ

記事を読む

D3.js

折れ線グラフを塗りつぶす

D3.jsでは両機内にを塗りつぶしたグラフを表示することができます。このとき、d3.svg.line

記事を読む

D3.js

グラフをソートして表示する

以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけでは

記事を読む

D3.js

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

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

記事を読む

D3.js

文字を描画する

SVGで文字を表示するにはtext要素を使います。<text>とと</text&g

記事を読む

スポンサードリンク

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 ↑