Last active
August 29, 2015 14:01
-
-
Save arun4444/0eb023a702409a618e8a to your computer and use it in GitHub Desktop.
hex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
<title>Hexagons Test</title> | |
<script src="http://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") | |
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; }) | |
.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){ | |
// hZ = 2/3 * pY / radius; | |
// pX = sqrt(3) * radius * ( hZ/2 + hX ); | |
// pX = - sqrt(3) * radius * ( hZ/2 + hY ); | |
// hX = (sqrt(3)/3 * pX - pY/3 ) / radius; | |
// hY = -(sqrt(3)/3 * pX + pY/3 ) / radius; | |
//convert form cube to axial coordinates | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment