D3 Examples - mouseover constant stroke effect

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
​
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
​
</style>
<body>
  <script src="d3.js"></script>
  <script src="d3-queue.min.js"></script>
  <script src="topojson.v1.min.js"></script>
  <script src="jquery.min.js"></script>
  <script>
​
  var width = 960,
  height = 500;
​
  var color = d3.scale.threshold()
      .domain([0.02, 0.04, 0.06, 0.08, 0.10])
      .range(["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"].reverse());
​
  var path = d3.geo.path();
​
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
​
  queue()
      .defer(d3.json, "us.json")
      .defer(d3.tsv, "unemployment.tsv")
      .await(ready);
​
  function ready(error, us, unemployment) {
      if (error) throw error;
​
      var rateById = {};
​
      unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });
​
      var counties = svg.append("g")
          .attr("class", "counties")
          .selectAll("path")
          .data(topojson.feature(us, us.objects.counties).features)
          .enter()
          .append("path")
          .style("fill", function(d) {
              return color(rateById[d.id]);
          })
          .attr("d", path);
​
      counties.on("mouseover", function(d) {
          highlight = $(this).clone().css({
            "pointer-events": "none",
            "fill": "none",
            "stroke": "rgb(10, 10, 10)",
            "stroke-width": "2"
          })
          .attr("class", "highlight")
          .appendTo(d3.selectAll(".states"))
        });
      counties.on("mouseleave", function(d) {
          d3.selectAll(".highlight").remove();
      })
​
      var states = svg.append("g")
        .attr("class", "states");
​
      states.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
        .attr("d", path);
  }
​
  </script>
​
    