Why is the zoom and projection functions not working correctly for geojson data in d3 v5?


I am trying to project the coordinates of the polygon geometries of geojson data, but I get the following image everytime:

enter image description here

In the image, it can be seen that the coordinates are projected correctly but somehow the paths are zoomed in fully on the svg. It also does not help when I change the scale to a lower value since the same image would result. I don’t really know what causes this, but I suspect that I have a problem with the zoom functionality since it does not zoom properly when I click on one of the areas. I also do not know how and why the screen became grey. I expect that the geometry figures are colored grey with background of the svg being white, but that is not the case here. How can I fix this problem?

The fiddle link: https://jsfiddle.net/codingwithtrails/mbsqe0kr/5/

js code used:


const width = 750;
const height = 750;

const data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {"name": "poly1"},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              4.72686767578125,
              52.95525697845468
            ],
            [
              4.5208740234375,
              52.39739142194209
            ],
            [
              5.152587890625,
              52.38901106223458
            ],
            [
              5.36956787109375,
              52.79113653258534
            ],
            [
              4.72686767578125,
              52.95525697845468
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {"name": "poly2"},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              4.8614501953125,
              53.186287573913305
            ],
            [
              4.68017578125,
              53.05607268392864
            ],
            [
              4.963073730468749,
              53.05442186546102
            ],
            [
              4.872436523437499,
              53.18299586008718
            ],
            [
              4.8614501953125,
              53.186287573913305
            ]
          ]
        ]
      }
    }
  ]
} 

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

const g = svg.append("g");

const projection = d3.geoMercator()
.center([5.5, 52.2])     
.scale(8700)                       
.translate([ width/2, height/2 ])

const path = d3.geoPath()
    .projection(projection)
    
let active = d3.select(null);
function reset() {
    active = d3.select(null);

    svg.transition()
    .duration(250)
    .call(zoom.transform, d3.zoomIdentity);
}
function mouseclicked(p) {  
    if (active.node() === this) return reset();
    active = d3.select(this);

    var bounds = path.bounds(p);
    var x = (bounds[0][0] + bounds[1][0]) / 2;
    var y = (bounds[0][1] + bounds[1][1]) / 2;
    var translate = [width / 2 - 5 * x, height / 2 - 5 * y];

    svg.transition()
        .duration(750)
        .call(zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(5));
}

function zoomFunction() {
    g.attr("transform", d3.event.transform);
}

const zoom = d3.zoom()
    .translateExtent([[0, 0], [width, height]])
    .scaleExtent([1, 8])
    .on("zoom", zoomFunction);
svg.call(zoom);

g.selectAll("path")
    .data([data])
    .enter()
    .append("path")
    .attr("d", path)
    .on("click", mouseclicked);

Source: JavaSript – Stack Overflow

November 25, 2021
Category : News
Tags: D3.js | geojson | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.