D3 Examples - Path stroke with selection.raise()

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
  path {
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  </style>
</head>
<body>
  <!DOCTYPE html>
  <svg width="960" height="500"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <script src="https://unpkg.com/d3-composite-projections@1.0.2"></script>
  <script>
  var svg = d3.select("svg"),
  width = svg.node().getBoundingClientRect().width,
  height = svg.node().getBoundingClientRect().height,
  projection = d3.geoConicConformalSpain(),
  path = d3.geoPath(projection);
​
  projection
  .scale(1)
  .translate([0, 0]);
​
  d3.queue()
  .defer(d3.json, 'map.json')
  .defer(d3.csv, 'population.csv')
  .await(function(error, es, rate) {
​
    // loop through the csv to create a new object accesible by ids
    var data = [];
    rate.forEach(function(d){
      data[d.cod] = {"cod":d.cod,"rate":+d.rate};
    });    
​
    color = d3.scaleThreshold()
    .range(['#d0e4f1','#c0d6e9','#afc7e1','#9fb8da','#8eaad2','#7d9ccb','#6c90c3','#5982bc','#4575b4'])
    .domain([5, 9, 19, 49, 74, 124, 249, 499, 1000]);
​
    var region = topojson.feature(es, es.objects.border),
    municipalities = topojson.feature(es, es.objects.municipalities).features
​
    var b = path.bounds(region),
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
​
    projection
    .scale(s)
    .translate(t);
​
    if (error) throw error;
​
    svg.append("path").datum(region).attr('d', path).attr('fill', 'none').attr('stroke', 'rgb(80,80,80)').attr('stroke-width', '2')
​
    svg.selectAll(".municipalities")
    .data(municipalities)
    .enter()
    .append("path")
    .attr('d', path)
    .attr('fill', function(d){
      return color(+data[d.properties.id].rate);
    })
    .attr('stroke', 'white')
    .attr('stroke-width', '.2')
    .on('mouseover', function(d) {
      d3.select(this).attr('stroke', 'black').attr('stroke-width', '2')
      d3.select(this).raise();
    })
    .on("mouseout", function(d){
      d3.select(this).attr('stroke', 'white')
      .attr('stroke-width', '.2');
    })
​
  });
​
  d3.selection.prototype.moveToFront = function() {
    return this.each(function(){
      this.parentNode.appendChild(this);
    });
  };
​
  </script>
​
</body>
</html>
​
    