我的d3-geo项目仅显示点，而不显示地图本身

Question

我正在创建可视化文件以在地图上显示各个城市的数据。我目前在指定区域显示了这些点，但是地图本身并未显示（即使在HTML中也是如此）。

Here is what appears after page load.这是下面的代码生成的HTML：

<svg data-v-ecb69b0a="" data-v-0e3cd57e="" width="960" height="600">

  <g class="cities">

    <path d="M921.9017045647397,486.52310787494935m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>

    <path d="M900.5084921592315,208.78382629852422m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>

    <path d="M960,113.47689212505065m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>

    <path d="M-1.8189894035458565e-12,307.52970151278714m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z"></path>

  </g>

</svg>

我正在使用Vue.js实现此图表。这是我的Vue组件源代码：

<template>
<svg width="960" height="600"></svg>
</template>

<script>
import * as d3 from 'd3'
import { feature } from 'topojson-client'

export default {
props: {chartData: {
  required: true
  }
},
data() {
  return {
    data: null
  }
},
watch: {
  chartData(val) {
    this.data = val;

    const projection = d3.geoEqualEarth();
    const path = d3.geoPath().projection(projection);

    projection.fitSize(["960","600"], feature(this.data, this.data.objects.cities));

    const svg = d3.select("svg");

    svg.append("g")
      .attr("class", "cities")
      .selectAll("path")
      .data(feature(this.data, this.data.objects.cities).features)
      .enter()
      .append("path")
      .attr("d", path);
  }
}
}
</script>

<style scoped>

</style>

使用以下命令将其添加到app.vue文件中：

<geographic-chart
  :chart-data="formattedGeoData"
></geographic-chart>

formattedGeoData的格式如下：

{
"type": "Topology",
  "objects": {
  "type": "Geometry Collection",
    "geometries": [
      {
        "type": "Point",
        "id": "1",
        "coordinates": [41.2565, 95.9345]
      },
      {
        "type": "Point",
        "id": "2",
        "coordinates": [41.5868, 93.6250]
      },
      {
        "type": "Point",
        "id": "3",
        "coordinates": [41.8781, 87.6298]
      },
      {
        "type": "Point",
        "id": "4",
        "coordinates": [39.0997, 94.5786]
      }
    ]
  }
}