LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

03
--
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によるデータバインド (1) | main | D3.js v4で等高線プロットを作成する >>
D3.js v4によるデータバインド (2)
0

    前回はSVG要素とデータをバインドしたうえで、Join, Update, Enter, Exit, Removeという一連の流れによってグラフが動的に変化する様子を確認しました。今回は、D3.js v4で新たに導入されたmergeメソッドを使って、前回のプログラムを書き直してみます。

     

    サンプルコードを下に示します。生成されるグラフは前回と変わりません。ポイントは、前回は別々に実施していたEnterとUpdateの処理を、36~59行目でいっぺんに行っている部分です。キーとなるのは49行目に出てくる merge メソッドです。

     

    少し詳しく見てゆきましょう。まず36行目で、新たなデータを enter メソッドによって追加しています。追加されたデータは37行目で rect 要素とバインドされたうえで、48行目にかけてさまざまな属性を設定されています。そのうえで、次に出てくる49行目の merge メソッドによって、enterで追加されたデータ要素と、既存のSVGエレメントとバインド済みにデータ要素 (Update分の要素) がマージされます。そして、Enter分の要素とUpdate分の要素の両方に対して、50行目以降で x, y, height 属性を設定しています。

     

    mergeメソッドによってEnterとUpdateの処理をいちどにできるため、v3に比べるとプログラムを若干短縮することができます (たとえば merge メソッドを使わなかった前回のプログラムが78行だったのに対して、今回のプログラムは72行)。

     

    個人的には、merge を使わないでUpdateとEnterをそれぞれ個別に指定するやり方のほうが、プログラムを読んだときに処理内容を理解しやすいので好きなのですが、このへんは好みの問題かもしれませんね。

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | アニメーション | 14:07 | comments(0) | - | - |
    スポンサーリンク