0

I use d3 version 4.0.0. and topojson.min.js to produce a map using german topo json data. I achieved to get the map on the browser however map appears very small.

I tried many ways to scale it but could not achieve to enlarge the size of the map.

I tried scaling with 1)command line tool, 2)in code and 3)in json data but none of them worked for me.

  1. I tried command line tool as below but it produces file with null

geoproject 'd3.geoAlbers().center([0, 54.4]).rotate([4.4, 0]).parallels([50, 60]).scale(1200 * 3).translate([960 / 2, 600 / 2])' < germany.json > germany_scaled1.json

  1. I tried same thing directly in the code with many ways but didnt work. For example below code gives undefined error for geo

var projection = d3.geoAlbers().parallels([50, 60]).translate([960 / 2, 600 / 2]).center([0, 54.4]).scale(1200 * 200) var path = d3.geo.path().projection(projection);

  // this is for render the map
  var update = svg.selectAll('path')
    .data(topoData)
  var enter = update.enter()
    .append('path')
  update.merge(enter)
    .attr('d', path) //d3.geoPath())
    .attr('fill', function(d) {
      return d3.interpolateBuGn(d.matchesPercent / maxMatch + 0.2);
    });
  1. I also tried same thing directly in json file with Transform but it did not work either

added this "transform":{"scale":[5.0,5.00],"translate":[80.0,30.00],"center":[0.0,54.4]}

I hope someone will help me to scale my map

Rasim AVCI
  • 133
  • 2
  • 4
  • 11
  • Rotation by longitude needs to be negative for eastern longitudes (yes, it appear counter intuitive). Also a value around 10 degrees would be more appropriate. The large scale value and the wrong rotation in option 2 likely results in nothing visible (but I’m not sure what you mean by “didn’t work” - did you get an error? Was nothing visible but if inspecting the page were things rendered off screen? Sharing more code might be useful if a lesser scale and proper rotation does not work. Also sharing the data source. – Andrew Reid Sep 28 '22 at 07:19

0 Answers0