散布図にプロットしているデータ セットがあります。円の 1 つにマウス カーソルを合わせると、データ (x 値、y 値など) がポップアップ表示されるようにしたいと思います。試してみたのは次のようになります。
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function() {
d3.select(this).enter().append("text")
.text(function(d) {return d.x;})
.attr("x", function(d) {return x(d.x);})
.attr("y", function (d) {return y(d.y);}); });
どのようなデータを入力すればよいかについて、もっと詳しく説明する必要があると思います。
ベストアンサー1
必要なのはツールチップだと思います。これを行う最も簡単な方法は、svg:title各円に要素を追加することです。ブラウザがツールチップの表示を処理し、マウスハンドラは必要ありません。コードは次のようになります。
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
...
.append("svg:title")
.text(function(d) { return d.x; });
もっと凝ったツールチップが欲しい場合は、例えばtipsyを使うといいでしょう。ここ例えば。