d3.js - pagex - d3 tooltip v4

cómo mostrar el nombre del nodo cuando se pasa el mouse sobre el nodo en el gráfico de árbol contraíble

Question

Estoy desarrollando un gráfico de árbol colapsable. Estoy tratando de generar mouse sobre el evento en el nodo. Cuando muevo el mouse sobre el nodo en ese momento, debería mostrar el nombre del nodo. Lo intenté, pero no sé cómo calcular el valor del atributo de transformación para mostrar el nombre por encima o por debajo del nodo.

var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click)
.on("mouseover", function(d){
alert("over");
d3.select(this).attr(''transform'', function(d){ return ''translate(?,?)''})
.text(d.name + ": " + d.id)
.style(''display'', null);
})
.on("mouseout", function(d){ alert("out"); d3.select(this).style(''display'', ''none''); });

traducir(?,?)

Enlace de gráfico de árbol contraíble: http://bl.ocks.org/mbostock/4339083

Por favor, intenta ayudarme Gracias

Answer 1

Los grupos de nodo de clase se traducen a su ubicación, si desea agregar un elemento debajo de él puede usar coordenadas relativas. El centro del círculo, por ejemplo, está ubicado (por defecto) en las coordenadas (0, 0) relativas al grupo. Si desea agregar un texto de 10 px debajo del círculo y 20 px a la derecha, debe hacer:

var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click)
.on("mouseover", function(d) {
var g = d3.select(this); // The node
// The class is used to remove the additional text later
var info = g.append(''text'')
.classed(''info'', true)
.attr(''x'', 20)
.attr(''y'', 10)
.text(''More info'');
})
.on("mouseout", function() {
// Remove the info text on mouse out.
d3.select(this).select(''text.info'').remove();
});

Saludos.