title: How to display country name labels on an SVG map drawn with d3?
body: <p>I am currently having trouble trying to display country names on a d3 world map. </p>
  
  <p>Here is an image of a leaflet example which shows country names. This would be something I would like to add to my d3 version. JUST the country names if possible. If not I can always go the leaflet route but thought I'd try in d3 first.</p>
  
  <p><a href="https://i.stack.imgur.com/7daBs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7daBs.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the d3 version</p>
  
  <p><a href="https://i.stack.imgur.com/15siG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/15siG.png" alt="enter image description here"></a></p>
  
  <p>Here is how I am currently drawing the map</p>
  
  <pre><code>    // reference to actual element d3 selects
      this.svg = d3.select(this.mapContainer.nativeElement)
          .append('svg')
          .attr('width', this.width)
          .attr('height', this.height)
          .call(zoom)
          .append('g')
          .attr('class', 'map');
  
      this.projection = d3.geoMercator()
          .scale(225)
          .translate([this.width / 2, this.height / 1.5]);
  
      const path = d3.geoPath().projection(this.projection);
  
      let g = this.svg.append('g');
  
      // if unknown is not in the filter set remove it from the json
      const filteredWorldMapJson = this.worldMapJson.features;
  
      // features are a list of countries
      // ex: { type: 'Feature', properties: { name: 'United States }, geometry: { type: 'Polygon', coordinates[] }, id: 'USA' }
      let test = g.attr('class', 'countries')
          .selectAll('path')
          .data(filteredWorldMapJson)
          .enter()
          .append('path')
          .attr('d', path)
          .attr('class', d =&gt; d.id)
          .style('fill', d =&gt; this._mapService.getBinColor(d.id))
          .style('stroke', 'white')
          .style('opacity', 0.8)
          .style('stroke-width', 0.3);
  
      // id = countries abbreviation
      this.svg.append('path')
          .datum(topojson.mesh(filteredWorldMapJson, (a, b) =&gt; a.id !== b.id))
          .attr('class', 'names')
          .attr('d', path);
  </code></pre>
  
  <p>The country names are part of the geojson so I assume I can grab that and append them to each country somehow</p>