Solution 1 :

Your map data is topoJson but you are treating it as geoJson. So as @AndrewReid pointed out there is no .features property in it.

You can use topoJson.js to convert it:

<html>
  <meta charset="utf-8" />
  <head>
    <title>geoPath measures</title>
  </head>

  <body>
    <svg id="my_dataviz" width="1000" height="1000"></svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>

    <script>
      var svg = d3.select('#my_dataviz');
      var projection = d3.geoMercator().center([0, 5]);
      var geoGenerator = d3.geoPath().projection(projection);

      function update(someTopoJson) {
      
        let geojson = topojson.feature(
          someTopoJson,
          someTopoJson.objects.continent_Africa_subunits
        );

        svg
          .append('g')
          .selectAll('path')
          .data(geojson.features)
          .enter()
          .append('path')
          .attr('d', geoGenerator)
          .attr('fill', 'steelblue');
      }

      d3.json(
        'https://raw.githubusercontent.com/deldersveld/topojson/master/continents/africa.json',
        function (err, json) {
          update(json);
        }
      );
    </script>
  </body>
</html>

Problem :

I am new to d3js library. I try to drow Afrika continent contours and I have following code:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>geoPath measures</title>
</head>

<body>
<svg id="my_dataviz" width="400" height="300"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>

<script>
  var svg = d3.select('#my_dataviz');
  var projection = d3.geoMercator().center([0, 5]);
  var geoGenerator = d3.geoPath().projection(projection);

  function update(geojson) {
    svg.append("g")
      .selectAll("path")
      .data(geojson.features)
      .enter()
        .append("path")
        .attr('d', geoGenerator);
  }

  d3.json('africa.json', function(err, json) {
    update(json)
  })
</script>
</body>
</html>

However, I get following error:

Uncaught TypeError: svg.append(...).selectAll(...).data(...).enter is not a function

What is the issue? What I am doing wrong?

Comments

Comment posted by Andrew Reid

The most likely cause of the error is probably that geojson.features is not an array. Can you log it and confirm it is?

Comment posted by user2536982

Yep Andrew, this was an issue. Thanks!

By