Мой проект d3-geo отображает только точки, а не саму карту

Question

Я работаю над созданием визуализации для отображения данных по различным городам на карте. В настоящее время у меня есть точки, отображаемые в обозначенной области, но сама карта не отображается (даже в HTML).

Вот что появляется после загрузки страницы. Это 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>

Форматированный GeoData имеет следующий формат:

{
"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]
      }
    ]
  }
}