*

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

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

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

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

スポンサードリンク

関連記事

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

読み込んだCSVファイルのヘッダー名が日本語だったら

TSV,CSVファイルのヘッダー名が英語であるとは限りません。 日本語で書かれたりすることもありま

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

文字を描画する

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

記事を読む

D3.js

JSONデータを読み込んで、ボタンでパックレイアウトで表示するデータを切り替える

今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に3

記事を読む

D3.js

SVGとは

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

記事を読む

D3.js

パックレイアウトの生成

パックレイアウトは階層(親子)関係を利用してチャートを表すものです。D3.jsではパックレイアウトは

記事を読む

スポンサードリンク

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 ↑