D3.js'de svg: g öğesine bir başlık özniteliği ekleme

Question

Bir ağaç haritasındaki verileri görüntüleyen D3.js ile bir uygulama yapıyorum. İdeal olarak, ağaç haritasının her bir düğümü hakkında daha fazla bilgi görüntülemek için ağaç haritasına bir araç ipucu vermek istiyorum. Ağaç haritası bir .JSON dosyasından veri ile beslenir.

Şu anda bu bilgiyi title= özniteliğinden geçirebileceğim jquery eklentisi Poshy Tip ile çalışıyorum. Bir şekilde ağaç-svg: g elementinin başlık özniteliklerini eklemem gerektiğini biliyorum ama her düğümün başlığını nerede belirlediğimi anlayamıyorum.

İşte ben vb tüm bildirimleri yapmak Senaryomun başlangıcı ... İşte

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

Kafamda poshytip() kullanıyorum nasıl

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

Hemen hemen ben sadece istiyorum interaktif ağaç haritasındaki münferit eşyaları "yapabilme" ve pop-up için bir araç ipucu alabilme .. ama hiç şansım olmadı. Her öğeyi belirli bir kimliğe sahip olacak şekilde nasıl ayarlayabilirim .. .JSON dosyasında bunu yapabilir miyim? Bunu yapmanın daha kolay bir yolu var mı? Bunu yanlış bir şekilde mi yapıyorum? Herhangi bir yardım harika olurdu.

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 dinamik başlık niteliği ekleyin. Bir kez fareyi dairenin üzerine getirdiğimizde, Adı, Küçük yaştaki popu gösterir. Ad, yaş test.json'da belirtilmelidir.