Merge pull request markmarkoh#225 from thebenedict/master

add option to update bubbles in place when lat/lng unchanged
philipsu522 · Sep 14, 2015 · db310a7 · db310a7
2 parents b994a14 + 2a8fa57
commit db310a7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -474,15 +474,19 @@ If the aspect ratio of your custom map is not the default `16:9` (`0.5625`), you
         borderWidth: 2,
         borderColor: '#FFFFFF',
         popupOnHover: true,
+        radius: null,
         popupTemplate: function(geography, data) {
-          return '&lt;div class="hoverinfo"&gt;&lt;strong&gt;' + data.name + '&lt;/strong&gt;&lt;/div&gt;';
+          return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
         },
         fillOpacity: 0.75,
+        animate: true,
         highlightOnHover: true,
         highlightFillColor: '#FC8D59',
         highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
         highlightBorderWidth: 2,
-        highlightFillOpacity: 0.85
+        highlightFillOpacity: 0.85,
+        exitDelay: 100,
+        key: JSON.stringify
     },
     arcConfig: {
       strokeColor: '#DD1C77',

diff --git a/src/js/datamaps.js b/src/js/datamaps.js
@@ -50,7 +50,8 @@
         highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
         highlightBorderWidth: 2,
         highlightFillOpacity: 0.85,
-        exitDelay: 100
+        exitDelay: 100,
+        key: JSON.stringify
     },
     arcConfig: {
       strokeColor: '#DD1C77',
@@ -442,7 +443,7 @@
       throw "Datamaps Error - bubbles must be an array";
     }
 
-    var bubbles = layer.selectAll('circle.datamaps-bubble').data( data, JSON.stringify );
+    var bubbles = layer.selectAll('circle.datamaps-bubble').data( data, options.key );
 
     bubbles
       .enter()
@@ -532,10 +533,12 @@
 
           d3.selectAll('.datamaps-hoverover').style('display', 'none');
         })
-        .transition().duration(400)
-          .attr('r', function ( datum ) {
-            return val(datum.radius, options.radius, datum);
-          });
+
+    bubbles.transition()
+      .duration(400)
+      .attr('r', function ( datum ) {
+        return val(datum.radius, options.radius, datum);
+      });
 
     bubbles.exit()
       .transition()
@@ -546,7 +549,6 @@
     function datumHasCoords (datum) {
       return typeof datum !== 'undefined' && typeof datum.latitude !== 'undefined' && typeof datum.longitude !== 'undefined';
     }
-
   }
 
   //stolen from underscore.js