Agregar un atributo de título a svg: elemento g en D3.js

Question

Estoy construyendo una aplicación con D3.js que muestra una información en un árbol-mapa. Idealmente, lo que me gustaría es darle al árbol de mapas una información sobre herramientas para mostrar más información sobre cada nodo del mapa arbolado. El árbol de mapa se alimenta de datos de un archivo .JSON.

Actualmente estoy trabajando con el plugin jquery Poshy Tip donde puedo pasar esta información a través del atributo title=. Sé que necesito agregar de alguna manera el atributo de título al elemento svg: g en el árbol-mapa, pero no puedo entender dónde configuré cada atributo de título de nodo.

Aquí está el comienzo de mi guión donde hago todas mis declaraciones etc ...

<div id="chart"></div> 
<script type="text/javascript"> 
var tree = d3.layout.tree() 
.size([h, w - 160]); 

var diagonal = d3.svg.diagonal() 
.projection(function(d) { return [d.y, d.x]; }); 

var vis = d3.select("#chart").append("svg:svg") 
.attr("width", w) 
.attr("height", h) 
.append("svg:g") 
.attr("transform", "translate(40,0)"); 

d3.json("test.json", function(json) { 
    json.x0 = 800; 
    json.y0 = 0; 
    update(root = json); 
}); 

Así es como estoy usando poshytip() en la cabeza

$(function(){ 
    $('node').poshytip({slide: false, followCursor: true, alignTo: 'cursor', 
    showTimeout: 0, hideTimeout: 0, alignX: 'center', alignY: 'inner-bottom', 
    className: 'tip-twitter'}); 
} 

Prácticamente sólo quiero ser capaz de "pasar el mouse" sobre los elementos individuales en el árbol-mapa interactivo y obtener una información sobre herramientas para emergente ... pero no he tenido suerte. ¿Cómo puedo configurar cada elemento para que tenga un Id específico ... ¿lo hago en el archivo .JSON? ¿Hay alguna forma más fácil de hacer esto? ¿Estoy haciendo esto de la manera incorrecta? Cualquier ayuda sería genial.

Answer 1

var vis = d3.select("#chart").append("svg:svg") 
.attr("width", w) 
.attr("height", h); 

var yourGElement = vis.append("svg:g").attr("transform", "translate(40,0)"); 

yourGElement.append("svg:title").text("Your tooltip info"); 

Answer 2

nodeEnter.append("svg:circle") 
     .attr("r", 1e-6) 
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) 
     .append("svg:title") 
      .text(function(d){return "Name:"+d.Name+"\nAge:"+d.age;}); 

SVG anexar dinámicamente atributo título. Una vez que movemos el mouse sobre el círculo, se muestra el Nombre, Edad en una pequeña ventana emergente. Nombre, edad debe especificarse en test.json.