I've been following the "let's make a map" tutorial https://bost.ocks.org/mike/map/, however in the middle of the tutorial, drawing the paths failed with errors about topojson.feature() is not a function.
script.js:14 Uncaught TypeError: topojson.feature is not a function(…)
(anonymous function) @ script.js:14
(anonymous function) @ d3.min.js:6
call @ d3.min.js:6
e @ d3.min.js:6
script.js:
var width = 960,
height = 1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("js/uk.json", function(error, uk) {
if (error) return console.error(error);
console.log(uk);
svg.append("path")
.datum(topojson.feature(uk, uk.objects.subunits))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});HTML included scripts:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Map test</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src='js/jquery.js'></script>
<script src='js/d3.min.js' charset="utf-8"></script>
<script src='js/topojson.js'></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>Originally I've suspected the issue to be with the topojson file I've converted Pathfile-GeoJSON-TopoJSON, I've names it uk.js for testing purposes while following the tutorial. Another hint as mentioned in the reply here: https://github.com/topojson/topojson/issues/236 However after changing the issue remained the same, and confirmed after substituting uk.json I've creted myself with: https://bost.ocks.org/mike/map/uk.json
You are missing the topojson client files, which have been split off from the base topojson code in v2. If you include the following script in your code, it should work: