*

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

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

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

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

スポンサードリンク

関連記事

D3.js

D3.jsでデータを変更する

前回の記事で、横棒グラフを表示しました。 今回は、ボタンを押したら動的にデータを変更して、 その

記事を読む

D3.js

D3.jsでSVG図形を作成してみる

ページ内にdiv要素の中にsvg要素およびSVG図形の1つであるrect要素を 生成します。svg

記事を読む

D3.js

ツリーマップを表示する

ツリーマップレイアウトは階層(親子)関係を利用してチャートを表示します。以前の記事で出てきたパックレ

記事を読む

D3.js

フォースレイアウト

D3.jsでは、フォースレイアウトを作成する機能も用意されています。フォースレイアウトは予めノードと

記事を読む

D3.js

D3.jsで目盛りを表示してみる

今回はグラフに加えて目盛りを表示します。 目盛りのスタイルを決めて、設定する 目盛りや数値や

記事を読む

D3.js

D3.jsって何?

D3.jsとは、データを視覚的に表現するためのJavaScriptライブラリです。 D3.jsが表

記事を読む

D3.js

SVGとは

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

記事を読む

D3.js

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

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

記事を読む

D3.js

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

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

記事を読む

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 ↑