D3.js: макет кластерного Force с текстом и инструментом советами

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

Я был бы очень признателен, если кто-то помог мне понять это!

Спасибо! :)

EDIT: Переменная подсказка:

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/