d3noob/.block

## .block
license: mit

## README.md

      
    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

  
## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>