0

ここでD3グラフにツールチップを追加しようとしています: http://jsfiddle.net/ericps/b5v4R/1/

しかし、これらのマウスイベントを追加すると、すべてがレンダリングされる方法が台無しになり、その理由がわかりません。軸のある折れ線グラフです

dots.enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", open_line.x())
    .attr("cy", open_line.y())
    .attr("r",3.5)
    .on("mouseover", myMouseOverFunction)
    .on("mouseout", myMouseOutFunction);

144行目で両方のメソッドをコメントアウトすると.on、すべてが期待どおりにレンダリングされます

これについての洞察はありますか？

ツールチップはこのフィドルに基づいています

http://jsfiddle.net/ericps/E4vrX/

4

2 に答える 2

1

いくつかの問題:

ねずみ：

d3.mouse(container) 関数は、コンテナー (ノード) に対するマウスの位置を示します。を指定d3.mouse(this)しましたが、これは円ノードを参照していますが、svg コンテナーを参照したい場合: d3.select("svg").node().

インフォボックス:

infobox div はどこにも定義されていないため、何も表示されません。

更新された Fiddle を参照してください: http://jsfiddle.net/b5v4R/4/

于 2013-01-22T02:53:23.047 に答える
1

あなたが行方不明myMouseOverFunctionです。

関数を定義するだけでグラフが (軸と共に) 正しくレンダリングされ、MouseOver 機能を適切に定義できるようになります。

var myMouseOverFunction = function() {}

jsfiddle への更新された応答を確認でき ます。ドットそのもの。

于 2013-01-22T00:09:44.910 に答える