2

Just started learn D3.js and TopoJSON. I had shapefile files and converted using mapshaper to TopoJSON, but when I tried on my local server my map showing empty page without any errors. I don't have direction what's going on.

Here my HTML got from a tutorial:

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Set a style for our data -->
  <style>
  path {
    stroke: red;
    stroke-width: 0.5px;
    fill: grey;
  }
  </style>
<body>

  <!-- implementation of the hosted D3- and TopoJson js-libraries -->
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>

  <!-- map creation --> 
  <script>
  // canvas resolution
  var width = 1000,
      height = 600;

  // projection-settings for mercator    
  var projection = d3.geo.mercator()
      // where to center the map in degrees
      .center([0, 50 ])
      // zoomlevel
      .scale(100)
      // map-rotation
      .rotate([0,0]);

  // defines "svg" as data type and "make canvas" command
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  // defines "path" as return of geographic features
  var path = d3.geo.path()
      .projection(projection);

  // group the svg layers 
  var g = svg.append("g");

  // load data and display the map on the canvas with country geometries
  d3.json("blok_zona.json", function(error, topology) {
      g.selectAll("path")
        .data(topojson.object(topology, topology.objects.blok_zona)
            .geometries)
      .enter()
        .append("path")
        .attr("d", path)
  });

  // zoom and pan functionality
  /*var zoom = d3.behavior.zoom()
      .on("zoom",function() {
          g.attr("transform","translate("+ 
              d3.event.translate.join(",")+")scale("+d3.event.scale+")");
          g.selectAll("path")  
              .attr("d", path.projection(projection)); 
    });

  svg.call(zoom)*/

  </script>
</body>
</html>

and my JSON files: https://www.dropbox.com/s/xcp9iks661rzftx/blok_zona.json?dl=0

2

Finally it's work, is just centering a projection on right value to:

var projection = d3.geo.equirectangular()
        .scale(1050)
        .rotate([-120, 0])
        .translate([width / 2, height / 2]);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.