D3 españa mapa2

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<script>
var tt = `
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"fill":"transparent"},"geometry":{"type":"Polygon","coordinates":[[[-5.193863491222032,35.75518219659085],[-4.591006232105143,35.33071198174565],[-3.640056525070008,35.39985504815198],[-2.604305792644112,35.17909332940112],[-6.244342006851411,35.145865383437524],[-5.929994269219833,35.75998810479399],[-5.193863491222032,35.75518219659085]]]}}]}


`;
var ttj = JSON.parse(tt);
</script>

CSS

html, body {
  overflow:hidden;
  margin:0px;
  padding:0px;
}

.municipalities {
  fill: #222;
}

.municipalities :hover {
  fill: orange;
}

.state-boundary {
  fill: none;
  stroke: #fff;
  pointer-events: none;
}

svg{
    border: 1px solid gray;
}

.background {
  fill: none;
  pointer-events: all;
}

.feature {
  fill: #ccc;
  cursor: pointer;
}

.feature.active {
  fill: orange;
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

JavaScript

//CON D3 V5!!!
console.log("VIEW GEOJSON, centered and scaled,  with D3 V5, maps from https://geojson-maps.ash.ms/");
//translateData(ttj);
var width = 300,
    height = 200,
    active = d3.select(null);

    var svg = d3.select("body").append("svg")
        .attr("width", "90%")
        .attr("height", "90%")
        .attr("viewBox", "0 0 " + width + " " + height)
        .attr("preserveAspectRatio","xMidYMid meet");//.attr("viewBox","0 0 800 600");
        
    svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);
    
  //fitSize  para que encuandre el geojson
	var projection = d3.geoMercator().fitSize([width, height], ttj);
	var path = d3.geoPath().projection(projection);


 var g =svg.append("g")
      .attr("class", "municipalities");
   g.selectAll('path')
  .data(ttj.features)
  .enter()
  .append("g")
  .append('path')
  .attr('d', path)
  .attr("class", "feature")
      .on("click", clicked);
  
 
 /**
 Utilizamos la propieadad tx y ty de cada feature para trasladar sus coordenadas.
 */
 function translateData(json){
 		json.features.forEach(feature => {
      feature.geometry.coordinates.forEach(
      coord1=> coord1.forEach(
      coord2 => coord2.forEach( coord3 =>{
      coord3[0] += feature.properties.tx;
      coord3[1] += feature.properties.ty;
      })));
    });
 
 }
 
 
 function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" +...