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

【问题标题】：d3 tooltip removes my axis (and doesn't work)d3 工具提示删除了我的轴（并且不起作用）
【发布时间】：2013-01-21 23:51:57
【问题描述】：

我正在尝试将工具提示添加到我的 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/

【问题讨论】：

标签： javascript tooltip d3.js mouseover jsfiddle

【解决方案1】：

你错过了myMouseOverFunction。

只需定义函数即可正确呈现您的图形（使用轴），从而允许您正确定义 MouseOver 功能。

var myMouseOverFunction = function() {}

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

【讨论】：

是的，你是对的！不知道我怎么没看到。下一个谜团是它不起作用
看看我上面的编辑。它包含一个指向应该按预期工作的新 JSfiddle 的链接。

【解决方案2】：

几个问题：

鼠标：

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

信息框：

信息框 div 没有在任何地方定义，所以没有任何显示。

查看更新的小提琴：http://jsfiddle.net/b5v4R/4/

【讨论】：

很好地指出了这一点，在我的生产服务器中，我仍然无法显示工具提示。 onmouseover 中的var circle = d3.select(this); 是否也需要选择其他内容而不是this