Javascript 如何在d3强制导向布局节点上显示工具提示?

Javascript 如何在d3强制导向布局节点上显示工具提示?,javascript,html,d3.js,tooltip,data-visualization,Javascript,Html,D3.js,Tooltip,Data Visualization,我用层次结构数据构建了一个示例d3可视化,效果非常好。当用户在节点上移动鼠标时,我需要显示绑定到该图标/节点的数据。我也这样做了,效果很好 我需要根据工具提示上的节点显示数据。我不想为相同的对象绑定html元素 这是我的密码 HTML: <div id="chart"></div> node = vis.selectAll(".node"); node = node.data(force.nodes()); node.exit().

我用层次结构数据构建了一个示例d3可视化,效果非常好。当用户在节点上移动鼠标时,我需要显示绑定到该图标/节点的数据。我也这样做了,效果很好

我需要根据工具提示上的节点显示数据。我不想为相同的对象绑定html元素

这是我的密码

HTML:

  <div id="chart"></div>
 node = vis.selectAll(".node");
        node = node.data(force.nodes());
        node.exit().remove();
        node.enter().append("g")
            .attr("class", "node")
            .on("click", click).on("mouseover", function(){return tooltip.style("visibility", "visible") 
                 tooltip.text
                 ;})
.on("mousemove", function(){return tooltip.style("top",
    (d3.event.pageY - 130)+"px").style("left",(d3.event.pageX - 130 )+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

要将类添加到工具提示,请执行以下操作:

var tooltip = d3.select("#chart")
        .append("div")
        .attr("class", "my-tooltip")//add the tooltip class
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden");
    tooltip.append("div")
        .attr("id", "tt-name")
        .text("simple");
    tooltip.append("div")
        .attr("id", "tt-size")
        .text("simple");
要在鼠标悬停时添加值和大小,请执行以下操作:

tooltip.select("#tt-name").text(d.name)
tooltip.select("#tt-size").text(d.size)

更新的代码是:

您是说要在鼠标悬停时将节点上的文本显示为工具提示吗?是的,不是文本,实际节点值仍然不是很确定我是否尝试了此操作。。。在工具提示中,我在这里显示节点的值……这是您的要求吗。@Cyril是的,谢谢,您知道如何使用样式显示它吗。说名字和四子以前真的试过这个,但力对我没用,无论如何谢谢西里尔。这真的很有帮助。