LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

04
--
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
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3でマウスイベントを使う | main | D3.js v4によるデータバインド (1) >>
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) | - | - |
    スポンサーリンク