*

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

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

今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に3つのボタンを設けて、ボタンを押すと読み込むデータを切り替えてパックレイアウトを表示するコードを書いてみます。

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

スポンサードリンク

関連記事

D3.js

SVGとは

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

記事を読む

D3.js

ツリーマップレイアウトで使用されている文字数を数えて表示する

テキストファイルを読み込んで、ファイル内で使われている文字数を数えてツリーマップに表示します。 入れ

記事を読む

D3.js

データの追加と更新

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

記事を読む

D3.js

ヒストグラムの表示データの範囲を指定

前回のヒストグラムの記事で点数の範囲を10点刻みではなく5点、20点など任意の範囲で表示できるように

記事を読む

D3.js

D3.jsを複数の棒グラフを表示する

前回の記事では、四角形と一本の棒グラフを表示させました。 しかし、データが複数がある場合は、データ

記事を読む

D3.js

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

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

記事を読む

D3.js

D3.jsで縦棒グラフを表示してみる

グラフの中でも使用頻度が高いのが縦棒グラフです。これまでの記事では横棒グラフを表示しましたが、原理は

記事を読む

D3.js

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

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

記事を読む

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 ↑