SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

07
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
D3.js v4で利用可能なカラーマップ一覧
0

    D3.jsがVer.4にバージョンアップしてから、いろいろなカラーマップが利用可能になりました。せっかくなので、今回はv4で追加されたカラーマップを紹介します。

     

    v4から追加されたカラーマップのなかに、0〜1の数値を入力するとRGB形式のカラーベクトルが返ってくるという、便利な関数があります。これらの関数を使うには、D3.js本体 (d3.v4.min.js) のほかに、d3-scale-chromatic.v1.min.js も追加で読み込む必要があります。以下では、このライブラリに含まれているカラーマップ関数一覧をプルダウンメニューから選択すると、そのカラーマップを画面上に表示するプログラムを、D3.jsを使って作成してみました。

     

    javascript のソースコードを表示するには、以下の「JavaScript」タブを選択して下さい。

     

    ます、17行目以降で、関数名の一覧を配列に保存しています。この配列を使って、47~56行目の部分でプルダウンメニューのDOM要素を作成しています (D3.jsのサンプルプログラムではほとんど見かけませんが、じつはこんなふうに D3 でプルダウンメニューを作成することもできます)。このなかに、49行目で on メソッドを使って、プルダウンメニューが変更されたら、カラーバーの表示を更新するための関数が呼び出されるようにしています。 59~71行目は初期状態のカラーバーを作成しています。また、74行目以降で、プルダウンメニューが変更されたときに呼び出される関数を記述しています。

     

     

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | D3.js | 22:19 | comments(0) | - | - |
    D3でマウスイベントを使う
    0

      D3の .on メソッドを使うと、ユーザのマウス操作によって表示中のSVG要素を変化させることができます。今回は、.リック、▲泪Ε好ン、マウスアウトの3つイベントそれぞれによって表示中の図形のサイズや色が変化する簡単なサンプルを紹介します。

       

      27行目までは、SVGの描画領域を設定したうえで、サンプルデータの配列とSVG要素をバインドして、配列の個数分だけ図形を作成しています。これまで何度もやってきた操作なので、説明は省略します。

       

      29行目以降の部分が今回のメインです。マウスイベントをキャッチするには、.on メソッドを使います。メソッドの第1引数 ("click", "mouseover" などの部分) は、キャッチするマウス操作の種類を指定しています。そのうえで、指定したマウス操作をキャッチしたときに何をするかを、第2引数に関数として与えています。

       

      ここで、いくつもある図形のうち、マウス操作をした図形だけを変化させたいので、select(this) としてその図形だけをセレクトしています。

       

       

       

      JUGEMテーマ:JavaScript

      このエントリーをはてなブックマークに追加
      | アニメーション | 19:55 | comments(0) | - | - |
      D3.js v4でTree図を作成する (3)
      0

        D3.jsを使う魅力は、なんといってもユーザの操作に従ってダイナミックに動くグラフを作成できるという点です。というわけで、前回までに作成した「静的なツリー図」を、インタラクティブに動く「動的なツリー図」にしてみましょう。

         

        以前作成したサンプルと同様に、対象となる html 内のプルダウン要素を指定して、その要素がユーザによって更新されたときにツリー図を更新するようにしました。具体的には、44行目でプルダウン要素を指定したうえで、その要素がユーザ操作によって更新されたときの動作を99行目以降で設定しています。更新処理のなかでは、(1) ノードの位置、(2) エッジの端点、(3) テキストの透明度 のそれぞれを更新しています。ここでは、前回説明したd3.hierarchy()メソッドで生成されたオブジェクトのうち、階層の深さを示す depth の値を参照することで、これら3つの更新処理を実現しています。

         

         

        JUGEMテーマ:JavaScript

        このエントリーをはてなブックマークに追加
        | D3.js | 22:29 | comments(0) | - | - |