javascript - d3js SVG :title tooltip doesn't show up

Question

d3js SVG:标题工具提示不显示

我有一个包含很多圆圈的图表，现在我想在每个圆圈中插入一个工具提示，但它既不能用作圆圈中的标题，也不能用作工具提示框。我找不到我的错误:

var circleSmall = canvas.append("circle")
             .attr("cx", 869)
             .attr("cy", 693)
             .attr("r", 10)
             .attr("fill", "green") 
.append("svg:title").text("Your tooltip info")
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})  

http://jsfiddle.net/WLYUY/57/

Answer 1

这里最重要的障碍是你的直肠。它们被附加在圆圈之后，并防止鼠标事件到达圆圈。所以，首先要做的是:

/* do this or append circles AFTER appending recs */
rect {
    pointer-events: none;
}

我添加了显示/隐藏工具提示所需的 mouseover 和 mouseout 事件。

完成FIDDLE这里。

注意:为了演示，我用带有橙红色边框的大橙色绘制了一个接收事件的圆圈(您不会错过)。这只是一个示例……通常您会将事件监听器应用于所有圈子。这让我进行了完整性检查:您目前正在“手动”添加形状，但我假设您最终会基于数据绑定(bind)来完成它，这是 D3 的要点之一。