Old school D3 from simpler times

All examples By author By category About

Andrew-Reid

Full window Github gist

d3v3 Managing Click and Mouseover events in maps

<html>
<head>
<style>
	.region {
    stroke: #fff;
    fill: #005DAA;
}

.hover {
    fill: yellow;
}

.selected{
    stroke: #fff;
    fill: orange;
}

#regName{
    position: absolute;
    top:  150px;
    height: 22px;
    width: 250px;
    padding: 3px;
    text-align:center;        
}
</style>
</head>
<body>

<div id="map" style="text-align:center">
</div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.js"></script>

<script type="text/javascript">
    var width = 960,
        height = 400,
        centered;

var projection = d3.geo.albers()
		.rotate([100,0])
		.center([0,35])
		.scale(800)

var path = d3.geo.path()
        .projection(projection);

var svg = d3.select("#map").append("svg")
        .attr("width", width)
        .attr("height", height);

queue()
      .defer(d3.json, "data.json")
      .await(ready);

function ready(error, us) {
        svg.append("g")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.us_eco_l3).features)
        .enter()
            .append("path")
            .attr("d", path)
            .attr("class", "region")
            .on("mouseover", function (d) {
                d3.select(this).attr("class", "region hover");
		d3.select(this).on("mouseout", function(d) {
			d3.select(this).attr("class", "region");
		})
            })
           .on("click", function (d) {
              	svg.selectAll('path').attr('class','region'); // ensure every other feature is set to default
		d3.selectAll('path').on("mouseover", function (d) { // add a mouseover event to every feature in order to get the last one clicked
                	d3.select(this).attr("class", "region hover"); 
			d3.select(this).on("mouseout", function(d) {
				d3.select(this).attr("class", "region"); // add a mouseout event to every feature on mouseover
				});
			});
		d3.select(this).on("mouseout", null); // cancel mouseover out events for the clicked feature.
		d3.select(this).on('mouseover',null);
		d3.select(this).attr('class','selected');
	});
    }

</script>
</body>

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.js