d3.jsのグラフを思うようにカスタマイズできずに手が止まってしまう件。

悩み所

サンプルを参考にして望んでいたひとつのグラフを作成することができたものの、それに手を加えようとしたら手が止まってしまいました。今、やりたいことは下の二つです。

ブラウザのウィンドウがリサイズされたら、リサイズ後のウィンドウサイズに応じたグラフに更新する。
タイマーで、サーバの更新されたデータを取得してグラフを更新する

どちらもsvgタグからマルッと消してイチから作り直す方法も考えられるのだけど、それはd3.js的に違うと思う。

なんで思い通りのものを作れないのだろうか。

リサイズについては、「d3.js レスポンシブ」でぐぐるといくつかのWebページがヒットするので、見よう見まねで手元のソースを変更しようとしたのだけど、どうしていいのかが分からない。

たとえば、線を引きなおす時に古い線を消す必要は？とか、データの個数が増減した場合にはグラフの線や棒などとの対応が崩れてしまうのではないかと。

どうしていいのかが分からない理由を考えると、「Data-Driven」の「Data」と「Driven」の区別をできていないからだと考えられます。これまでに経験したグラフを作成するライブラリを使うと、元になるデータを渡して、グラフを指定して、設定情報を指定して、えいっと実行すればグラフの画像を得られていたので、この考え方から転換できていないことに気づきました。

selectAllメソッドがしっくりこないのも、同じだと感じます。

ちょっと、探してみた。

しっくりこない感を解消できそうな予感がするページです。

D3 - セレクションの仕組み

d3.js - 三つの小円

読んでみた感想は、

データを与える
d3.js内でデータの要素との対比表を作る。
対比表に基づい描画する

という流れを気にしながら、もう一度チャレンジするといいのかも知れないと思いました。もっとも「キタコレ」と感じたのは悟りへの鍵でした。読んでいて最も知りたいことが書かれていました。

データを要素に結合するためには、どのデータをどの要素に割り当てるか知っておく必要がある。このために結合用のキーが用いられる。キーとは「名前」のように単なる識別用の文字列だ。データと要素が同じキーを持つときにデータをその要素に割り当てる。

キーを割り当てるための一番簡単なメソッドはインデックスを使う方法だ。最初のデータと要素のキーが "0"、二番目のデータと要素のキーが "1"、、、となる。

キーでデータと要素が結びついているということが分かれば、リサイズは実現できる予感がしてきました。