1

Why my map is in rectangle shape? I used older JSON file It gave me the output correctly but for this new one JSON file, It's giving me map in rectangle shape. Code is the same just minor changes had made like extracting state name and district name, rest are same.

Old Json file output: https://plnkr.co/edit/Z9A95awIrUCjPp9B

New Json file output: https://plnkr.co/edit/UurfR1CtfekldUrr?open=lib%2Fscript.js&preview

It should look like this https://github.com/ninjakx/Dc.-visualization-dashboard/blob/master/test_map.json

Since my json file is too large so I am taking a single district just to post here. I will be displaying the whole indian map.

Changes made:

  india.selectAll("path")
    .data(json.features) 
    .enter().append("path")
    .attr("d", path)
    .style("fill", colors[0])
    .style("opacity", 0.5)

    .on('click', function (d, i) {
      d3.select(this).transition().duration(300).style("opacity", 1);
      div.transition().duration(300)
        .style("opacity", 1)
      div.text(d.properties.statename+ ':' + d.properties.distname) //<---- Here only
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 30) + "px");
    })
Pygirl
  • 12,969
  • 5
  • 30
  • 43
  • 1
    Your geographic feature is wound the wrong way. While this doesn't matter for most other libraries, D3 uses spherical geometry, so for every set of coordinates there are two possible polygons: the area of focus, or everywhere else. The little spec you see in your feature is the boundary of your geographic area of focus. You can rewind a feature with turf.js ([eg](https://stackoverflow.com/a/49311635/7106086)) or with vanilla JS ([eg](https://stackoverflow.com/a/54949383/7106086)). – Andrew Reid May 04 '20 at 15:28
  • 1
    Also, you are manually setting a translate and a zoom value to try and center and scale your features - I believe I saw this causing issues in a previous question. You can use `projection.center([long,lat])` if you have geographic coordinates of an area of interest - which makes centering (but not scaling) a bit easier. But in d3v4 onwards there is `projection.fitSize()` and `projection.fitExtent()` which can be used to automagically fit a feature or feature collection to your SVG/Canvas ([eg](https://stackoverflow.com/a/40940028/7106086)). – Andrew Reid May 04 '20 at 15:31
  • Actually I have no knowledge on d3 js that's why using the solution whichever I can find. – Pygirl May 04 '20 at 15:34
  • It is working now but I lost my hovering effect. Now hovering is working on the background not on the state map. – Pygirl May 04 '20 at 15:38
  • Here is the working demo: https://plnkr.co/edit/TCSEfNKtil5ztWyE?open=lib%2Fscript.js&preview – Pygirl May 04 '20 at 15:39
  • 1
    You forgot to use `fixed` as the data to draw the map with (you only sized the map with it) on line 207. – Andrew Reid May 04 '20 at 15:44

0 Answers0