Как показать всплывающую подсказку на узле направленной компоновки d3?

Question

Я построил образец d3 визуализации с данными иерархии, который работает очень хорошо. Мне нужно отобразить данные, привязанные к этому значку/узлу, когда пользователь перемещает мышь по узлу. Я тоже это сделал, что хорошо работает.

Мне нужно отобразить данные в соответствии с узлом всплывающей подсказки. Я не хочу привязывать элемент html к тому же.

Вот мой код

HTML:

<div id="chart"></div> 

JS:

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");}); 

APPLICATION ON FIDDLE

Answer 1

Чтобы добавить класс всплывающую подсказку сделать:

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) 

Обновленный код here: