D3.jsのsvg：g要素へのタイトル属性の追加

Question

私はツリーマップにデータを表示するD3.jsを持つアプリケーションを構築しています。理想的には、ツリーマップの各ノードに詳細情報を表示するためのツールチップをツリーマップに与えます。ツリーマップには、.JSONファイルからデータが供給されます。

私は現在、title=属性でこの情報を渡すことができるPoshy Tip jqueryプラグインを使用しています。私は何とかツリーマップ内のsvg：g要素にtitle属性を追加する必要があることを知っていますが、各ノードのtitle attrをどこに設定するのか分かりません。相続人

私はすべての私の宣言などを作る私のスクリプトの先頭に...

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

ここでは、私は頭の中でposhytip()

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

を使用していますほとんど私がしたい方法ですインタラクティブなツリーマップ内の個々の項目を「マウスオーバー」できるようにして、ポップアップするためのツールチップを得ることができます。しかし、私は運がなかったのです。特定のIDを持つように各アイテムを設定するにはどうすればよいですか.JSONファイルでこれを行いますか？これを行う簡単な方法はありますか？私は間違った方法でこれについて行きますか？どんな助けも素晴らしいだろう。

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動的にtitle属性を追加します。円上にマウスを移動すると、小さなポップアップで名前、年齢が表示されます。名前、年齢はtest.jsonで指定する必要があります。