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

你不见了myMouseOverFunction。

简单地定义函数将正确地呈现您的图形（使用轴），允许您正确定义 MouseOver 功能。

var myMouseOverFunction = function() {}

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

于 2013-01-22T00:09:44.910 回答
1

几个问题：

老鼠：

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

信息框：

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

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

于 2013-01-22T02:53:23.047 回答