dc.jsを使ってグラフを描画した、と思っていたのであるが、参考にしたサイトで塚手板のは、d3.jsとcrossfilter.jsだけであり、dc.jsは使っていなかった。私のサイトでもライブラリを読み込んではいるものの使っていないことになる。まぁ、いいことにする。勘違いというか、理解していなかった、というだけだ。
d3.jsについてはオライリーの本が出ているので、きちんと勉強しようと、古本（電脳書房さんにて）を買ってみた。細かいところの調査など、理解を含めるために使ってみるつもりである。書式の設定など、まだ、自由に描画できているわけではないので。
今日は、グラフの再描画、というのをやってみた。私の場合、crossfilter.jsを使っている、とは言っても、二次元配列からのグラフ描画のために使っているだけであり、データの集計はSQL文で全て完了している。その行数を今までよりも多くし（SQLのLIMITの数値を多くした）、Javascriptのデータを多くし、Formを作って、ドロップダウンリストで、グラフに描画するデータ件数（先頭からの件数）を選択可能にしてみよう、という試みである。
Javascriptの仕込みから、OnChangeイベントでのグラフ描画まではすぐにうまくいったのであるが、グラフを同じIDタグのdiv領域に、再描画するときには、前のグラフを消してから書かないと、グラフが2個表示されてしまう。というか追加されていってしまうのであった。
色々調べると、d3にremove()というメソッドがあるのがわかったのであるが、構造を理解していないので、呼び出し方法がわからない。ということでググった。最後は英語サイトがピンポイントであった。ここである。
私のコード、というか、参考にさせてもらったコードでは、
var chart = d3.select(id)
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + "," + hoff + ")");
という形で、描画を開始していたので、
d3.select(id).select("svg").remove();
というコードで前のグラフを削除（クリア）できた。その後、共通関数化してある描画関数の呼び出し（初期表示時と同じ）で、件数だけが変わったグラフが挿入された。
クライアントサイドのプログラミングはあまりやってこなかったので、少しずつやっているところである。サーバサイドの方がデバッガさえ動けば楽だと思う今日この頃。
コメント