*

ツリーレイアウトを表示する

公開日: : 最終更新日:2016/03/22 D3.js

D3.jsにはツリーレイアウト(樹形図・木構造といったりもします)を生成することができます。ツリーレイアウトは以前の記事で書いたツリーマップと似ています。データセットに必要なプロパティ(キー名)も同一です。今回のサンプルコードでは会社の組織図を表示しています。部門名はnameプロパティで、それに属する課はchildren配列に格納しています。

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

スポンサードリンク

関連記事

D3.js

円グラフの色分けしてみる

円グラフは、それぞれの扇の部分が色分けされているのが普通です。扇形部分を色分けするにはstyle()

記事を読む

D3.js

ヒートマップをDOMに表示する

D3.jsは表示処理は行わないため、SVG、canvasだけではなく、HTMLのdiv要素を使いグラ

記事を読む

D3.js

データの追加と更新

データの追加処理 要素にデータを追加してグラフを表示するプログラムは何度も出てきています。データの

記事を読む

D3.js

積み上げ棒グラフ

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

記事を読む

D3.js

フィッシュアイプラグインを使ってみる

今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

散布図を作成

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

記事を読む

D3.js

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

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

記事を読む

D3.js

複数の折れ線グラフを表示する

複数の折れ線グラフを表示します。今回は3つのデータを用意して、3つの折れ線グラフを表示します。目盛り

記事を読む

スポンサードリンク

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 ↑