title: Adding a title attribute to svg:g element in D3.js
body: <p>I'm building an app with D3.js that displays a data in a tree-map. Ideally what I would like to is give the tree-map a tool-tip to display more info on each node of the tree-map. The tree-map is fed data from a .JSON file.</p>
  
  <p>I am currently working with the jquery plug-in <code>Poshy Tip</code> where I can pass this info through the <code>title=</code> attribute. I know I need to somehow add the title attribute to the svg:g element in the tree-map but I can't figure out where I set each nodes title attr.   </p>
  
  <p>Heres the beginning of my script where I make all my declarations etc...</p>
  
  <pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  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);
  });
  </code></pre>
  
  <p>Here is how I am using <code>poshytip()</code> in the head</p>
  
  <pre><code>$(function(){
    $('node').poshytip({slide: false, followCursor: true, alignTo: 'cursor', 
      showTimeout: 0, hideTimeout: 0, alignX: 'center', alignY: 'inner-bottom',
      className: 'tip-twitter'});
  }
  </code></pre>
  
  <p>Pretty much I just want to be able to "mouseover" the individual items in the interactive tree-map and get a tooltip to pop-up.. but i havent had any luck. How can I set each item to have a specific Id.. do I do that in the .JSON file? Is there an easier way to do this? Am I going about this in the wrong manner? Any help would be great.</p>