index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hexagons Test</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<style type="text/css">
svg {
border: solid 1px #aaa;
background: #eee;
}
path {
fill: lightsteelblue;
stroke: #000;
stroke-width: .5px;
}
</style>
</head>
<body>
<div id="hexMap"></div>
<script type="text/javascript">
var w = 960;
var h = 500;
var radius = 10;
var data = [];
data.push({
hex: [0,0],
id: "12"
});
data.push({
hex: [0,1],
id: "13"
});
data.push({
hex: [-1,0],
id: "14"
});
data.push({
hex: [-1,1],
id: "15"
});
data.push({
hex: [-1,2],
id: "12"
});
data.push({
hex: [1,-1],
id: "16"
});
data.push({
hex: [1,-1],
id: "17"
});
data.push({
hex: [1,0],
id: "18"
});
data.push({
hex: [1,1],
id: "19"
});
var svg = d3.select("#hexMap")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("pointer-events", "all")
.attr("id","topLevelSVG")
.append("g")
.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
.append("g")
.attr("id","topLevelGroup")
.attr("transform", "translate(" + [w/2, h/2] + ")");
update();
function update() {
var elem = svg.selectAll("g topLevelGroup")
.data(data.map(function(d) { return (
{
hex: hex(hexToPixel(d.hex[0],d.hex[1],radius), radius*2),
id: d.id
});
}));
var hexes = elem
.enter()
.append("g")
.attr("id",function(d) { return d.id; });
hexes
.append("path")
.attr("d", function(d) { return "M" + d.hex.join("L") + "Z"; })
.on("click", click)
.on("mouseover", mouseover)
.on("mouseout", mouseout);
var text = hexes.append("text")
.text(function(d){return d.id});
}
function click(d, i) {
d3.select(this)
.style("fill", "yellow");
}
function mouseover(d, i) {
d3.select(this)
.style("fill", "red");
}
function mouseout(d, i) {
d3.select(this)
.style("fill", "lightsteelblue");
}
function hex(center, diameter, tilted) {
if (center == null || center.length != 2) throw new Error("center must be an array [x, y]");
if (diameter == null) diameter = 0;
if (tilted == null) tilted = false;
var a = diameter / 2,
b = (Math.sqrt(3) * a) / 2,
x = center[0],
y = center[1];
return tilted ?
[[x - a / 2, y - b], [x - a, y], [x - a / 2, y + b], [x + a / 2, y + b], [x + a, y], [x + a / 2, y - b]] :
[[x - b, y - a / 2], [x - b, y + a / 2], [x, y + a], [x + b, y + a / 2], [x + b, y - a / 2], [x, y - a]];
};
function hexToPixel(aQ,aR,radius){
var hX = aQ;
var hZ = aR;
var hY = -hX-hZ;
var pX = - Math.sqrt(3) * radius * ( hZ/2 + hY );
var pY = 3/2 * radius * hZ;
return [pX,pY];
}
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
};
</script>
</body>
</html>