やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

d3.jsで作成したテーブルのソートキー項目に▲▼マークをつける

前回のつづき。

成果物

GitHubd3.table.sort.mark.201702211657

Playgrounds

See the Pen d3.table.sort.mark.201702211657 by ytyaru (@ytyaru) on CodePen.

jsfiddle, jsdo.it

開発環境

今回

ソートするキーとなる項目にマークを付ける。

  • クリックした列をソートキーとする
  • 昇順のときは"▲"、降順のときは"▼"マークを付与する

苦労したこと

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

所感

コードが長くなってきた。見づらい。