It is possible to add custom HTML content to large tooltips by passing an HTML-formatted string to the "html" key in .tooltip( ). In this example, a custom link to Google.com is inserted into the large tooltip that appears when clicking on a square in the Tree Map.
Featured on D3plus.org
| <!doctype html> | |
| <meta charset="utf-8"> | |
| <script src="//d3plus.org/js/d3.js"></script> | |
| <script src="//d3plus.org/js/d3plus.js"></script> | |
| <style> | |
| a#google { | |
| background-color: #cc0000; | |
| color: white; | |
| display: block; | |
| font-size: 24px; | |
| margin: 50px; | |
| padding: 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div id="viz"></div> | |
| <script> | |
| var sample_data = [ | |
| {"value": 100, "name": "alpha"}, | |
| {"value": 70, "name": "beta"}, | |
| {"value": 40, "name": "gamma"}, | |
| {"value": 15, "name": "delta"}, | |
| {"value": 5, "name": "epsilon"}, | |
| {"value": 1, "name": "zeta"} | |
| ] | |
| var htmlButton = "<a id='google' href='http://www.google.com' target='_blank'>Click here to go to Google</a>" | |
| var visualization = d3plus.viz() | |
| .container("#viz") | |
| .data(sample_data) | |
| .id("name") | |
| .size("value") | |
| .tooltip({"html": htmlButton}) | |
| .type("tree_map") | |
| .draw() | |
| </script> |
