d3工具提示删除了我的坐标轴（并且不起作用）

Question

我正在尝试在此处的D3图中添加工具提示： http : //jsfiddle.net/ericps/b5v4R/1/

但是添加这些mouseevents搞砸了所有内容的渲染方式，我不知道为什么。 它是带有轴的线图

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/

Answer 1

您缺少myMouseOverFunction 。

简单定义函数将正确地（带有轴）渲染图形，从而使您能够正确定义MouseOver功能。

var myMouseOverFunction = function() {}

您可以看到对jsfiddle的更新响应： http : //jsfiddle.net/sahhhm/hQgbc/可以以不同的方式实现，但快速的更改是在CSS中删除.FILL定义，而在创建时填充该值点本身。

Answer 2

几个问题：

老鼠：

d3.mouse（container）函数提供鼠标相对于容器（节点）的位置。 您指定了d3.mouse(this) ，但这是指圆形节点，而您想引用svg容器： d3.select("svg").node() 。

信息框：

没有在任何地方定义infobox div，因此什么也没显示。

请参阅更新的Fiddle： http ： //jsfiddle.net/b5v4R/4/