Prevent bubbles scaling with map

[adrianbj]

I want users to be able to zoom in so they can click/tap on bubbles that were overlapping when zoomed out, but current behavior doesn't help because the bubbles get bigger as well.

Am I missing an obvious setting or will I need to code a solution to redraw the bubbles after zooming?

Thanks!

[hinok]

This is small workaround... Of course it will not work for bubles with different radius and border-width.

function rescaleWorld(datamap) {
  datamap.svg
    .selectAll('g')
    .attr('transform', 'translate(' + d3.event.translate + ') scale(' + d3.event.scale + ')');
}

function rescaleBubbles(datamap) {
  var bubbleRadius = 4;
  var bubbleBorder = 15;

  datamap.svg
    .selectAll('.datamaps-bubble')
    .attr('r', bubbleRadius / d3.event.scale)
    .style('stroke-width', (bubbleBorder / d3.event.scale) + 'px');
}

var map = new Datamap({
  element: '#foo',
  done: function(datamap) {
    datamap.svg.call(d3.behavior.zoom().on('zoom', redraw));

    function redraw() {
      datamap.svg.select('g')
        .selectAll('path')
        .style('vector-effect', 'non-scaling-stroke');

      rescaleWorld(datamap);
      rescaleBubbles(datamap);
    }
  }
});