score:1

Accepted answer

  • Have you ever considered to connect your projection and path generator?

    var path = d3.geoPath(projection);

  • Also set the path in the resize method. Label the 2 path elements

    svg.select('#nation').attr('d', path(topojson.feature(us, us.objects.nation)));
svg.select('#nation2').attr('d', path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));

  • the onload in the body has to go

     <body>

  • there are no tags with class land or state

    //svg.select('.land').attr('d', path);
//svg.select('.state').attr('d', path);

  • why call projection size and translate if you call fitSize

Here is the script code

var width = parseInt(d3.select('#mapContainer').style('width')) - 50
  ,height = width/960*600;

var svg = d3.select("svg")
  .attr("width", width + 50)
  .attr("height",height);

var defs = svg.select("defs");

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;

  var topoFeatureStates = topojson.feature(us, us.objects.states);
  var projection = d3.geoIdentity()
      .fitSize([width, height], topoFeatureStates);

  var path = d3.geoPath(projection);

  defs.append("path")
      .datum(topojson.feature(us, us.objects.nation))
      .attr("id", "nation")
      .attr("d", path);

  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill-opacity", 0.2)
      .attr("filter", "url(#blur)");

  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill", "#fff");

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("fill", "none")
      .attr("stroke", "#777")
      .attr("stroke-width", 0.70)
      .attr("d", path);


 // function to resize map 
  function resize() {
      // adjust things when the window size changes
      width = parseInt(d3.select('#mapContainer').style('width')) - 50;
      //console.log(parseInt(d3.select('#mapContainer').style('width')));
      height = width/960*600;
      svg.attr('width', width + 50).attr('height', height);
      // update projection
      projection
          .fitSize([width, height], topoFeatureStates);

      // resize the map
      svg.selectAll('path').attr('d', path);
  }

  // resize event
  d3.select(window).on("resize", resize);
});

Edit

Wondering why the path in the resize did not I work had a second look at the responsive example. It attaches the result of topojson as datum to the path.

Modified the code to do the same.


Related Query

More Query from same tag