Question

我根据我过去的经验正确地做了一切：尝试将工具提示附加到圆圈，这对我之前的节点链接图表起作用。

我为工具提示创建了一个div：

var div = d3.select("#vis").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

然后用

调用它

var node = svg
  .selectAll("circle")
  .data(nodes)
  .enter()
  .append("g")
    .on("mouseover", function(d) {
        div.transition()        
            .duration(200)      
            .style("opacity", .9)
        div .html( ...

在这里工作得很好：https://codepen.io/kvyb/pen/dRoXpp

然而，问题从这里开始：现在我正在尝试设置类似的工具提示但是在节点链接力有向图，您也可以在此处查看：https://codepen.io/kvyb/pen/BZdzZZ

我执行设置工具提示的相同过程，但是当我尝试使用

调用它时

var node = svg.append("g")
  .attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
  .attr("r", 20)
  .attr("stroke","black")
  .attr('fill', 'url(#gradient)')
  .on("mouseover", function(d) {        
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html(d.id) 
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");})

我没有错误，我没有工具提示。我不确定为什么＆＃34; mouseover＆＃34;没有注册，但其他事情就像＆＃34;拖动＆＃34;是。有什么区别，我应该如何解决这个问题？

节点悬停时没有工具提示

0 个答案: