Question

我是D3.js的新手，我一直在研究这种聚集力布局：https://bl.ocks.org/mbostock/7881887

我一直在尝试将鼠标悬停在圆圈中心和工具提示上。但是，我失败了。

这是我的努力：

//For text
node = svg.selectAll("circle")
    .data(nodes)
  .enter().append("circle")
    .style("fill", function(d) { return color(d.r/m); })
    .attr("class", "circles")
    .call(force.drag);

word = node.append("text")
          .data(nodes)
          .text(function(d) { console.log(d);return d.cluster.substring(0, d.r/ 3); }); 


//For tool tip

node.on("mouseover", function(d,i) {
        tooltip.transition().duration(200).style("opacity", .9);      
        tooltip.html(d.word)  
        .style("left", (d3.event.pageX) + "px")     
        .style("top", (d3.event.pageY - 28) + "px");    
    })                  
    .on("mouseout", function(d) {       
        tooltip.transition().duration(500).style("opacity", 0);   
    });

如果有人帮我解决这个问题，我将非常感激！

谢谢！：）

编辑：工具提示变量：

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

Answer 1

您的工具提示代码似乎没问题。也许问题出在你的CSS中。这就是我做的，你可以更好地设计它：

div.tooltip {   
    position: absolute;         
    text-align: left;
    background: white;
    pointer-events: none;
}

这是小提琴，你可以看到工具提示正常工作：https://jsfiddle.net/L8ecvwoz/2/

D3.js：具有文本和工具提示的Clustered Force布局

1 个答案: