Dodawanie atrybutu tytułu do elementu svg: g w D3.js

Question

Buduję aplikację z D3.js, która wyświetla dane w drzewie-mapie. Idealnie chciałbym, aby mapka drzewa była podpowiedzią, aby wyświetlić więcej informacji o każdym węźle drzewa-mapy. Mapa drzewa jest zasilana danymi z pliku .JSON.

Obecnie pracuję z wtyczką jquery Poshy Tip, gdzie mogę przekazać tę informację za pomocą atrybutu title=. Wiem, że muszę jakoś dodać atrybut title do elementu svg: g w drzewie-mapie, ale nie wiem, w którym miejscu ustawiam attrę każdego z tych węzłów.

Herezje początek mojego skryptu gdzie robię wszystkie moje deklaracje itp ...

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

Oto jak używam poshytip() w głowie

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

Dość dużo po prostu chcę być w stanie "najechać myszką" na poszczególne elementy w interaktywnej mapie drzewa i uzyskać podpowiedź do wyskakującego okienka .. ale nie miałem szczęścia. Jak mogę ustawić każdy element, aby miał konkretny identyfikator ... czy robię to w pliku .JSON? Czy istnieje prostszy sposób na zrobienie tego? Czy podchodzę do tego w niewłaściwy sposób? Każda pomoc byłaby świetna.

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 dynamicznego dołączenia atrybut tytułowy. Kiedy przesuniemy mysz nad kółko, wyświetli się nazwa, wiek w małym wyskakującym okienku. Imię i nazwisko musi być podane w test.json.