Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/.block

Last active January 13, 2022 22:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d3noob/8150631 to your computer and use it in GitHub Desktop.
Save d3noob/8150631 to your computer and use it in GitHub Desktop.
Download ZIP
Adding links to objects
Raw
.block
license: mit
Raw
README.md

The above example is intended to demonstrate adding a hyperlink to an object (the rectangle) and instructing the text object to be transparent to the pointer so that the link on the rectangle is recognised 'through' the text. This is the example code for a section on adding links to d3.js objects in the book D3 Tips and Tricks

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>
var width = 449;
var height = 249;
var word = "gongoozler";
var holder = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// draw a rectangle
holder.append("a")
.attr("xlink:href", "http://en.wikipedia.org/wiki/"+word)
.append("rect")
.attr("x", 100)
.attr("y", 50)
.attr("height", 100)
.attr("width", 200)
.style("fill", "lightgreen")
.attr("rx", 10)
.attr("ry", 10);
// draw text on the screen
holder.append("text")
.attr("x", 200)
.attr("y", 100)
.style("fill", "black")
.style("font-size", "20px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("pointer-events", "none")
.text(word);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment