グラフからのハイパーリンクの設定

描画したグラフから（正確には今回は、描画したグラフのテキスト文字列部分から）、リンクをたどって次のアクションを起こしたい。パラメータはクリックした部分の文字列などの情報にしたい、という次の段階を考えた。

　「d3.js Hyperlink」などとしてググると、英語での回答がすぐに得られる。参考のシンプルなサンプルも見ることができる。しかし、既存のテキストトラベルにリンクを追加、というのがうまくいかなかった。
　失敗例としては、表示されるはずの文字列（棒グラフの値を示す文字列）が全く表示されなくなる、リンクを示す「a href」のタグは埋め込まれているのだが、入れ子になっていないので、空文字に対してリンクが貼られていて、結果動作しない、などの現象に悩まされた。グラフの描画を関数化していて、リンクを入れたり入れなかったりもできるだけ共通化させたかったので、下のようなコードになってしまった。このattrの設定、appendの呼び出しは、通常であれば分割して呼び出しても結果は変わらないのであるが、今回はこの形でないと動作しなかった。等価になる分割の方法が別にあるのか、決まり事を理解しきっていないのか、よくわからない。

if (islink == true) {
　　aLabels.enter().append("a")
　　　　.attr({"xlink:href": function (d) {
　　　　　　return "https://tkland.kim/KIM-Tunes/setcountexcept/" + getParams() + "/" + d.linkvalue[0] + "/" + d.linkvalue[1];
　　　　　　},
　　　　　　"target": "_self",})
　　　　.append("text")
　　　　.attr("class", "a-label")
　　　　.attr("dy", ".35em")
　　　　.attr("dx", 3)
　　　　.attr("y", function (d, i) {
　　　　　　return y(i) + y.rangeBand() / 2
　　　　})
　　　　.text(function (v) {
　　　　　　return v.key;
　　　　})
　　　　.attr("x", 0)
　　　　.attr("text-anchor", "start");
} else {
　　aLabels.enter().append("text")
　　　　.attr("class", "a-label")
　　　　.attr("dy", ".35em")
　　　　.attr("dx", 3)
　　　　.attr("y", function (d, i) {
　　　　　　return y(i) + y.rangeBand() / 2
　　　　})
　　　　.text(function (v) {
　　　　　　return v.key;
　　　　})
　　　　.attr("x", 0)
　　　　.attr("text-anchor", "start");
}

同じコードがifとelseの中に二度出てくるのが気持ち悪いのだが、これを異なる部分だけif-elseにいれて、共通部分を後から、とやると、うまく行かなかった。書き方はあるかもしれないが。

レンタルサーバへの呼び出しになっているが、呼び出される、PHPのコードはこれから準備する。次はその部分の制作になる。認証からみ、あるテーブルへのデータの登録をここから行うのであるが、セットとして、解除も行わなければならない。しばらくは、D3.jsからZendFrameworkの世界に没頭のようである。

コメント