*

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

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

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

まずは上記のプラグインをダウンロードします。今回は、jsフォルダ内にfisheye.jsというファイル名で用意し、HTMLファイル内でD3.jsファイルを読み込んだ後に、このプラグインも読み込みます。これで準備OKです。
サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

D3.js

グラフをアニメーションさせる

前回の記事でデータセットに応じてグラフに変化を付しました。 ボタンをクリックするとすぐに書き換わっ

記事を読む

D3.js

マウスイベントでグラフを変化させる

D3.jsでは要素にイベントを設定することができます。この記事ではマウスカーソルが棒に重なったとき・

記事を読む

D3.js

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

D3.jsにはツリーレイアウト(樹形図・木構造といったりもします)を生成することができます。ツリーレ

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

D3.js

円グラフを作る

日頃のグラフの中でよく見かけるのが円グラフです。スマートフォンの販売シェアとかを表す時に使われます。

記事を読む

D3.js

データの追加と更新

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

記事を読む

D3.js

HTML形式とXML形式ファイルを読み込む

HTMLファイルを読み込む D3.jsではHTMLファイルを読み込むこともできます。 データは、

記事を読む

D3.js

世界地図を表示する

地図のデータ形式にはいろいろなものがありますが、多くの地図データはshape形式(.shp)です。こ

記事を読む

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 ↑