Path of topojson not drawn in browser

Question

I want to display a map with d3 but the path is not drawn in the browser although in the developer tools I see that the topojson file is loaded so there is data for the path. I just get a blank page. What could be the problem?

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

path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-linecap: round;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
height = 600;

var path = d3.geo.path()
    .projection(null);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("build/immoscout.topojson", function(error, us) {
  if (error) return console.error(error);

  svg.append("path")
      .datum(topojson.mesh(us))
      .attr("d", path);
});

You are calling `.projection(null)`. You need to set one of D3's projections there. — Lars Kotthoff, Dec 10 '15 at 17:28

score 1 · Answer 1 · edited May 23 '17 at 12:30

Is your question answered based on Lars' comment, "You are calling .projection(null). You need to set one of D3's projections there"? Few projection options listed below. You may also want to check and make sure that your server can run .topojson files. See How to allow download of .json file with ASP.NET

Extension: .json
MIME type: application/json

Extension: .geojson
MIME type: application/json

Extension: .topojson
MIME type: application/json

1) Mollweide projection shows the entire world

var width = 500;
var height = 500;
var projection = d3.geo.mollweide()
    .scale(120)
    .translate([width / 2, height / 2]);
var geoPath = d3.geo.path().projection(projection);

2) Mercator projection, which has became standard used by Google Maps

var width = 500;
var height = 500;
var aProjection = d3.geo.mercator()
        .scale(80)//80 works well in this case
        .translate([width / 2, height / 2]);
var geoPath = d3.geo.path().projection(aProjection);//d3.geo.path() defaults to albersUSA, which is a projection suitable only for maps of the United States

`

Path of topojson not drawn in browser

1 Answers1