前回のつづき。ヘッダをクリックするとその列をキーにして昇順ソートする。
成果物
d3.table.Sort.onClick.201702211322
Playgrounds
See the Pen d3.table.AscSort.onClick.201702210809 by ytyaru (@ytyaru) on CodePen.
開発環境
- Linux Mint 17.3 MATE
- Firefox 42.0
- d3.js v4.5.0
方法
- クリックするたびにDOMの削除と新規作成を行う
- クリックするたびに既存DOMのテキストノード値変更だけを行う
Bの方法を用いる。DOMの要素数が変化しないなら、わざわざ作りなおす必要はない。
失敗例
上記は配列データでソートしたが、以下はtr要素で降順ソートしようとしている。そんなことをしている時点で意味不明だが、ソートしてみても意味不明なことになる。まだ理解できていない。
See the Pen d3.table.sort.Failed.201702202030 by ytyaru (@ytyaru) on CodePen.
前回までもこういう失敗を何度もくりかえしながら試行錯誤していた。
参照
“d3.js table sort"でGoogle検索してみつけた。一応メモ。
GitHub - ile/d3-tablesort: Sortable, scrollable table for D3
Table sorting (from Oliver Rolle) - bl.ocks.org
所感
まだまだ自信をもって思うようにコードを書けない。やってみたいことを小さく1つずつやっていけば、モチベを保ちつつ、少しずつ理解もできていくはず。
グラフの可視化までは遠いが、地を固めればもっと広く応用できるはず。d3.jsはC#のLINQほどインパクトはないけど、JSを少し楽に書けるツールとして利用できるようになりたい。