昨日のグラフの、順位が同じ時行が続くときには順位が表示されない問題、解決した。理解できていないのであるが、d3.jsを正しく使えていなかった、ということであろう。が、どうして、これで動くようになったのかも理解できていない。が、表示できるようにはなった。
d3.jsについては、順を追って理解していくことにする。
ラベルを作成するときに、次のようなコードを使用している。（再生数の例）
var valueLabels = chart.selectAll(".value-label")
.data(artists, function(v) { return v.key; });
artistsというのは流用を続けているコードなので、このような変数名になっているのであって、実は適切な名前ではない。中身は、データの配列である。PHP（+Smarty）で出力した連想配列の配列になっている。
連想配列のキーには、現状、position, key, numberを用意している。
再生数が一致している行では値が重複していてもテキストは出力されていた。出力されなかったのは次のようなコードを書いたときだ。（順位の例）
var posLabels = chart.selectAll(".p-label")
.data(artists, function(v){ return v.position;});
このようにラベルを作ったときには、同じ値が連続するときには、テキストが出力されず、昨日の画像のようなグラフになった。Firefoxのコンソールを見てもエラーはない。
意味は分かっていないが、このv.positionをv.keyに再生数と同じコードにしただけでグラフはなおった。というか意図通りになった。が、くどい感じもするから、どっちもどっちである。
ラベルのテキストを指定する無名関数では、v.position, v.key, v.numberをそれぞれ使うことで値は表示できているので問題はないようである。
これから、理解していく予定である。
現状の再生履歴はこちら。
コメント