*

正円とパスを描画する

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

CSVファイルからデータを読み込んで、ヒストグラムを表示する

クラス別の点数をデータにしたCSVファイルを読み込んで、ボタンをクリックするとほかのクラスの成績表が

記事を読む

D3.js

ボタンをクリックして、折れ線グラフの表示範囲を変える

JSONファイルからデータを読み込んで折れ線グラフを表示します。グラフのデータの読み込みは10年分の

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

円グラフにアニメーションを付けて表示する

記事のタイトルの通り、円グラフをアニメーションさせながら表示させてみます。円グラフを0度から360度

記事を読む

D3.js

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

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

記事を読む

D3.js

縦棒グラフにアニメーションを付ける

グラフを効果的に見せるためにアニメーションを使います。縦棒グラフをアニメーションさせます。D3.js

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

スポンサードリンク

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 ↑