前回のつづき。
成果物
d3.table.sort.mark.201702211657
Playgrounds
See the Pen d3.table.sort.mark.201702211657 by ytyaru (@ytyaru) on CodePen.
開発環境
- Linux Mint 17.3 MATE
- Firefox 42.0
- d3.js v4.5.0
今回
ソートするキーとなる項目にマークを付ける。
- クリックした列をソートキーとする
- 昇順のときは"▲"、降順のときは"▼"マークを付与する
苦労したこと
DOM要素を選択して更新しようとしたが、それができなかった。
selectAll("th:contents('id')")
, nodes()
, filter()
, いろいろ試してもできなかった。
結局、data().text()
により更新することで解決した。text(function(d){...})
の関数内で条件分岐して実装できた。
データ駆動に慣れない
いまいちd3.jsのデータ駆動がわかっていないと感じた。d3.jsはデータ駆動だからDOM要素から検索してどうこうするのではなく、データ主導でどうにかする必要があるのだろう。どうにも慣れない。
こちらの表題ように、jQueryでやっていたDOMセレクトを基準に考えてしまっていた。しかし、d3.jsはデータ駆動であるため考え方が根本的に違う。あくまで一次元配列データを基準に処理していく。DOM要素ではなくデータが基準である。APIとしてはdata()
,enter()
,exit()
を使っていくことになる。改めて思い知った。
気づいたこと
前回、気になっていた初回クリックの遅延が今回はない。もしかするとdata().enter()
をクリックのたびに実行するのをやめたからかもしれない。
元々新規生成は初回の一度だけで十分なので、今回のコードのほうが良い。
参考
Filtering in d3.js - bl.ocks.org
所感
コードが長くなってきた。見づらい。