読者です 読者をやめる 読者になる 読者になる

やってみる

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

d3.jsで作成したテーブルを昇順ソートする

前回のつづき。ヘッダをクリックするとその列をキーにして昇順ソートする。

成果物

GitHubd3.table.Sort.onClick.201702211322

Playgrounds

See the Pen d3.table.AscSort.onClick.201702210809 by ytyaru (@ytyaru) on CodePen.

jsfiddle, jsdo.it

開発環境

方法

  1. クリックするたびにDOMの削除と新規作成を行う
  2. クリックするたびに既存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を少し楽に書けるツールとして利用できるようになりたい。