Skip to content

Instantly share code, notes, and snippets.

@d3noob d3noob/index.html
Last active Jan 1, 2016

Embed
What would you like to do?
Adding links to objects

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

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.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
You can’t perform that action at this time.