d3で描かれたSVGマップに国名ラベルを表示する方法は？

Question

現在、d3世界地図に国名を表示しようとしています。

ここに、国名を示すチラシの例のイメージがあります。これは私のd3バージョンに追加したいものです。可能であれば、国名を入力してください。そうでなければ、私はいつもリーフレットルートに行くことができますが、まずはd3で試してみると思いました。ここで

は

ここ

は、私は現在

// 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 => d.id) 
     .style('fill', d => 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) => a.id !== b.id)) 
     .attr('class', 'names') 
     .attr('d', path); 

国の名前は、私が想定しそうにGeoJSONの一部であるマップを描いています方法ですD3バージョンです私はそれをつかんで何とか各国に追加することができます

Answer 1

良い質問 - 一般に、geojsonファイルからラベルデータ（この場合は国名）を解析し、ラベルが所属する地理的特徴の投影された位置を使用して地図上にラベルを配置したいとします。

ここでこれを実行するいくつかのコードです：

// Filter down the labels by label rank (only show the most important labels) 
var labelData = data.features.filter(function(d) { 
    return d.properties.labelrank < 4; 
}); 

var labels = grp.selectAll('text.label').data(labelData); 

labels 
    .enter() 
    .append('text') 
    .classed('label', true); 

labels 
    .attr('x', function(d) { 
    return projection(d3.geo.centroid(d))[0]; 
    }) 
    .attr('y', function(d) { 
    return projection(d3.geo.centroid(d))[1]; 
    }) 
    .attr('text-anchor', function(d, i) { 
    // Randomly align the label 
    var idx = Math.round(3 * Math.random()); 
    return ['start', 'middle', 'end'][idx]; 
    }) 
    .text(function(d) { 
    return d.properties.admin; 
    }); 

labels.exit().remove(); 

フル作業例ここhttp://blockbuilder.org/pnavarrc/75ec1502f51f86c2f43e