-
-
Save Grepsy/6a2940321ebdfd0e97ed2fcfb36d13ef to your computer and use it in GitHub Desktop.
D3 tooltip using SVG title element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script type="text/javascript"> | |
| var w = 800, h = 500; | |
| var colors = d3.scale.category20(); | |
| var vis = d3.select("#chart").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var data = d3.range(20).map(function() { return { x:Math.random()*w, y:Math.random()*h, r:Math.random()*30 } }); | |
| vis.selectAll("circle") | |
| .data(data) | |
| .enter().append("svg:circle") | |
| .attr("stroke", "black") | |
| .attr("fill", function(d, i) { return colors(i); }) | |
| .attr("cx", function(d, i) { return d.x; }) | |
| .attr("cy", function(d, i) { return d.y; }) | |
| .attr("r", function(d, i) { return d.r; }) | |
| // Here we add an SVG title element the contents of which is effectively rendered in a tooltip | |
| .append("svg:title") | |
| .text(function(d, i) { return "My color is " + colors(i); }); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment