Adding a title attribute to svg:g element in D3.js

Question

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.

I am currently working with the jquery plug-in Poshy Tip where I can pass this info through the title= 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.

Heres the beginning of my script where I make all my declarations etc...

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

Here is how I am using poshytip() in the head

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

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.

Where is the code that is actually drawing the tree? It will have a select and a data option. You should be able to just add .attr('title', "My Title"). — PhoebeB, Jul 13 '12 at 09:17

score 20 · Accepted Answer · answered Jul 26 '12 at 19:53

20

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

answered Jul 26 '12 at 19:53

Elijah

4,609
3
28
36

1

Note, however, that this won't work in the update case. If your code needs to work a 2nd time around with new data, you will need to remove and append the title again, or just change its text. – hrabinowitz May 07 '14 at 16:58

score 5 · Answer 2 · edited Aug 11 '17 at 18:01

5

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 dynamically append title attribute. Once we move mouse over the circle it shows the Name, Age in small pop up. Name, age must be specified in test.json.

edited Aug 11 '17 at 18:01

CXJ

4,301
3
32
62

answered Aug 22 '13 at 04:11

Aravind Cheekkallur

3,157
6
27
41

Adding a title attribute to svg:g element in D3.js

2 Answers2