larskotthoff · August 29, 2015 14:01
diff --git a/index.html b/index.html
 <!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")
                .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){
            //  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>
	<!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")
	.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){
	// 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>