Interactive hexgrid - attaching mouse events to SVG polygons
Based on original examples: of Oli Hawkin's D3-hexjson module, now with background grid.
forked from henryjameslau's block: Testing Oli's D3-hexjson
xxxxxxxxxx
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="vis"></div>
<div id="h2label"><h2 id="hexlabel"></h2></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/olihawkins/d3-hexjson/build/d3-hexjson.js"></script>
<script>
// variable to keep data in globale scope (for debugging)
var dataset;
d3.json("hexagonal-grid.hexjson", function(error, hexjson) {
// global - by reference
dataset = hexjson;
// Set the size and margins of the svg
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 500 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;
// Create the svg element
var svg = d3
.select("#vis")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// create a label
var lab = d3.selectAll("#hexlabel")
.text("test this");
// Create the grid hexes and render them
var grid = d3.getGridForHexJSON(hexjson);
var gridHexes = d3.renderHexJSON(grid, width, height);
// Render the data hexes
var hexes = d3.renderHexJSON(hexjson, width, height);
var keys = hexes.map(function (d) {return d.key});
// Draw the background grid BEFORE the data
// in current example this is complete obscured by data hexes
// Bind the grid hexes to g.grid elements of the svg and position them
var hexgrid = svg
.selectAll("g.grid")
.data(gridHexes)
.enter()
.append("g")
.attr("transform", function(hex) {
return "translate(" + hex.x + "," + hex.y + ")";
});
// Draw the polygons around each grid hex's centre
hexgrid
.append("polygon")
.attr("points", function(hex) {return hex.points;})
.attr("class", "out");
// Bind the data hexes to g.data elements of the svg and position them
var hexmap = svg
.selectAll("g.data")
.data(hexes)
.enter()
.append("g")
.attr("transform", function(hex) {
return "translate(" + hex.x + "," + hex.y + ")";
});
// Draw the polygons around each data hex's centre
hexmap
.append("polygon")
.attr("points", function(hex) {return hex.points;})
.attr("class", "out")
.on("mouseover", function(d,i) {
d3.select(this).attr("class","in")
.style("fill", "coral");
// and change text label
lab.style("opacity", 1 )
.text( ":: " + keys[i] + " ::" );
})
.on("mouseout", function(d) {
d3.select(this)
.attr("class","out")
.style("fill","lightgray");
// reset text
lab.text("");
})
.on("click", function (d) {console.log("clicked!")} );
// Add the codes for the data hexes as labels
hexmap
.append("text")
.append("tspan")
.attr("text-anchor", "middle")
.text(function(hex) {return hex.key;});
hexgrid
.append("polygon")
.on("mouseover", function (d) {})
.on("mouseout", function (d) {})
});
</script>
</body>
</html>
Updated missing url https://cdn.rawgit.com/olihawkins/d3-hexjson/master/build/d3-hexjson.js to https://cdn.jsdelivr.net/gh/olihawkins/d3-hexjson/build/d3-hexjson.js
https://d3js.org/d3.v4.min.js
https://cdn.rawgit.com/olihawkins/d3-hexjson/master/build/d3-hexjson.js