datamaps.js、d3.js 对每个圆进行分组

Question

我有一个从 datamaps.js 生成的地图，这个库可以为自定义数据生成气泡。我需要的是将每个气泡放入一个元素中。因为我需要在其中显示一些可缩放的文本。我怎么做。

Answer 1

你的问题有点含糊，但你想在 datamaps.js 气泡中添加文本，可以很简单：

  // select all the circles
  d3.selectAll("g.bubbles circle")
     .each(function(d){
       var parent = d3.select(this.parentNode),
           self = d3.select(this),
           cx = self.attr('cx'),
           cy = self.attr('cy');

       // add some text
       parent.append('text')
         .attr('x', cx)
         .attr('y', cy)
         .text('TEXT!')
         .style('fill', 'black')
         .style('text-anchor', 'middle');       
     });

完整代码：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <!-- I recommend you host this file on your own, since this will change without warning -->
  <script src="http://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
  <h2>Datamaps Playground</h2>
  <p><a href="http://datamaps.github.io/">DataMaps Project Homepage</a></p>
  <div id="container1" style="position: relative; width: 80%; max-height: 450px;"></div>
 
     
     <script>
       //basic map config with custom fills, mercator projection
      var map = new Datamap({
        scope: 'world',
        element: document.getElementById('container1'),
        projection: 'mercator',
        height: 500,
        fills: {
          defaultFill: '#f0af0a',
          lt50: 'rgba(0,244,244,0.9)',
          gt50: 'red'
        },
        
        data: {
          USA: {fillKey: 'lt50' },
          RUS: {fillKey: 'lt50' },
          CAN: {fillKey: 'lt50' },
          BRA: {fillKey: 'gt50' },
          ARG: {fillKey: 'gt50'},
          COL: {fillKey: 'gt50' },
          AUS: {fillKey: 'gt50' },
          ZAF: {fillKey: 'gt50' },
          MAD: {fillKey: 'gt50' }       
        }
      })
      
      
      //sample of the arc plugin
      map.arc([
       {
        origin: {
            latitude: 40.639722,
            longitude: 73.778889
        },
        destination: {
            latitude: 37.618889,
            longitude: -122.375
        }
      },
      {
          origin: {
              latitude: 30.194444,
              longitude: -97.67
          },
          destination: {
              latitude: 25.793333,
              longitude: -0.290556
          }
      }
      ], {strokeWidth: 2});
       
      
       //bubbles, custom popup on hover template
     map.bubbles([
       {name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
       {name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
       {name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},

     ], {
       popupTemplate: function(geo, data) {
         return "<div class='hoverinfo'>It is " + data.name + "</div>";
       }
     });
       
       d3.selectAll("g.bubbles circle")
         .each(function(d){
           var parent = d3.select(this.parentNode),
               self = d3.select(this),
               cx = self.attr('cx'),
               cy = self.attr('cy');
         
           parent.append('text')
             .attr('x', cx)
             .attr('y', cy)
             .text(d.name)
             .style('fill', 'black')
             .style('text-anchor', 'middle');       

         });
       
       
     </script>
</body>

datamaps.js、d3.js 对每个圆进行分组

datamaps.js, d3.js grouping each circle

d3.js

datamaps