Adding a title attribute to svg:g element in D3.js
Solution 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");
Solution 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
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
.
accraze
Updated on August 12, 2020Comments
-
accraze almost 4 years
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 thetitle=
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.
-
hrabinowitz about 10 yearsNote, 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.