datamaps.js、d3.js各円をグループ化

-1

私はdatamaps.jsから生成されたマップを持っています。このライブラリはカスタムデータ用のバブルを生成できます。私が必要とするのは、このバブルのそれぞれを要素に入れることです。スケーラブルなテキストを表示する必要があるからです。それ、どうやったら出来るの。datamaps.js、d3.js各円をグループ化

出典

2016-05-04 DELIGUCU

あなたの要素を ' '要素と' 'ラベルがあります。しかし、あなたの質問にはコードは含まれておらず、やや曖昧です。良い質問をするにはhttp://stackoverflow.com/help/how-to-askを参照してください。 – echonax

はい、既存の要素を要素にプログラム的に配置したい – DELIGUCU

いくつかコードを記述できますか？これらの要素は何ですか？ SVGサークルですか？ – echonax

あなたの質問は少しあいまいですが、それはあなたが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>

出典

2016-05-04 13:29:39 Mark

これは本当にありがとう、私の日を節約:) –

datamaps.js、d3.js各円をグループ化

答えて

関連する問題