d3js 輸入不是 function 問題

Question

我是 d3js 庫的新手。 我嘗試繪制非洲大陸的輪廓，我有以下代碼：

<!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>

但是，我收到以下錯誤：

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

問題是什么？ 我做錯了什么？

Answer 1

您的map 數據是topoJson ，但您將其視為geoJson 。 因此，正如@AndrewReid 指出的那樣，其中沒有.features屬性。

您可以使用topoJson.js 對其進行轉換：

 <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>

d3js 輸入不是 function 問題

問題描述

1 個解決方案

解決方案1
2 已采納 2021-01-16 18:00:56

d3js 輸入不是 function 問題

問題描述

1 個解決方案

解決方案1 2 已采納 2021-01-16 18:00:56

解決方案1
2 已采納 2021-01-16 18:00:56