Aggiunta di un attributo titolo all'elemento svg: g in D3.js

Question

Sto costruendo un'app con D3.js che visualizza i dati in una mappa ad albero. Idealmente, ciò che vorrei è dare alla mappa dell'albero un suggerimento per visualizzare più informazioni su ciascun nodo della mappa ad albero. La tree map viene alimentata da un file .JSON.

Attualmente sto lavorando con il plug-in jquery Poshy Tip in cui posso passare queste informazioni tramite l'attributo title=. So che ho bisogno di aggiungere in qualche modo l'attributo title all'elemento svg: g nella tree-map ma non riesco a capire dove ho impostato il titolo attr di ogni nodo.

Heres l'inizio del mio script in cui faccio tutte le mie dichiarazioni, ecc ...

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

Ecco come sto usando poshytip() nella testa

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

Praticamente voglio solo essere in grado di "passare il mouse" ai singoli oggetti nella mappa ad albero interattiva e ottenere un suggerimento per il pop-up .. ma non ho avuto fortuna. Come posso impostare ogni elemento per avere un ID specifico. Lo faccio nel file .JSON? C'è un modo più semplice per farlo? Sto andando su questo nella maniera sbagliata? Qualsiasi aiuto sarebbe grande.

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 accoda in modo dinamico attributo title. Una volta spostato il mouse sopra il cerchio, viene visualizzato Nome, Età in piccolo pop-up. Nome, l'età deve essere specificata in test.json.