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。

注意：为了演示，我画了一个圆圈接收大橙色的事件，并带有橙红色边框（你不能错过）。这只是一个例子......通常你会将事件监听器应用于所有圈子。这让我得到了一个完整性检查：你正在追加形状和手动＆＃34;但我认为你最终会基于数据绑定来做到这一点，这是D3的主要观点之一。

d3js SVG：标题工具提示没有显示

1 个答案: