Как маркировать города на географической карте, используя D3.js?

Я использую D3.js для рисования географической карты США с использованием проекции Меркатора. Карта представляет население в каждом городе по всей территории США. Данные населения хранится в следующем файле:
Как маркировать города на географической карте, используя D3.js?

https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-cities.csv

Круги, обозначающие расположение городов отображаются на карте.

Код наклеивается ниже:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="description" content="D3byEX 12.18" /> 
    <meta charset="utf-8"> 
</head> 
<body> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script> 
    <script> 

     var width = 1000, height = 500; 
     var svg = d3.select('body') 
      .append('svg') 
      .attr({ 
       width: width, 
       height: height 
      }); 

     var usDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json', 
      citiesDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-cities.csv'; 

     queue() 
      .defer(d3.json, usDataUrl) 
      .defer(d3.csv, citiesDataUrl) 
      .await(function (error, states, cities) { 
       var path = d3.geo.path(); 
       var projection = d3.geo.albersUsa() 
        .translate([width/2, height/2]) 
        .scale([1000]); 
       path.projection(projection); 

       svg.selectAll('path') 
        .data(states.features) 
        .enter() 
        .append('path') 
        .attr('d', path) 
        .style({ 
         fill: 'none', 
         stroke: 'black' 
        }); 

       svg.selectAll('circle') 
          .data(cities) 
          .enter() 
          .append('circle') 
          .each(function (d) { 
           var location = projection([d.longitude, d.latitude]); 
           d3.select(this).attr({ 
            cx: location[0], cy: location[1], 
            r: Math.sqrt(+d.population * 0.00004) 
           }); 
          }) 
          .style({ 
           fill: 'blue', 
           opacity: 0.75 
          }); 
      }); 
    </script> 
</body> 
</html>

Но как добавить метки названий городов в тех кругах, в то время как парит над ними?

источник

2016-11-30 User456898

Самый основной (и некрасиво) метод создания подсказки использует <title>:

svg.selectAll('circle') 
    .data(cities) 
    .enter() 
    .append('circle') 
    .each(function (d) { 
      var location = projection([d.longitude, d.latitude]); 
      d3.select(this).attr({ 
      cx: location[0], cy: location[1], 
      r: Math.sqrt(+d.population * 0.00004) 
      }); 
    }) 
    .style({ 
      fill: 'blue', 
      opacity: 0.75 
    }) 
    .append("title") 
    .text(d=>d.name);

источник

2016-11-30 09:42:32

Он работает в настоящее время. – User456898

Перед .append («title») следует удалить полуколону. – User456898

@ Laurel благодарит, потому что я скопировал/вставлял ваш код, не обращая внимания. Я должен сказать, что титулы являются основными! Есть лучшие альтернативы, проверьте мой ответ здесь: http://stackoverflow.com/a/35665974/5768908 –

Как маркировать города на географической карте, используя D3.js?

ответ

Смежные вопросы