score:2

Accepted answer

I'd modify your mousemove and mouseout to operate on both maps at the same time:

    var mousemove_function = function(d) {
        var constinfo = dataMap[d.properties.AC_NO];
        var html = "<p>" + constinfo.constituencyName + "</p>"
        var tooltips = d3.selectAll('.showtooltip');
        // get paths from all maps
        d3.selectAll('.c' + constinfo.constNo)
          .each(function(d,i){
            var pos = this.getBoundingClientRect();
            // operate on appropriate tooltip
            d3.select(tooltips.nodes()[i]).classed('hidden', false)
              .html(html)
              .style("left", (pos.x + pos.width/2) + "px")
              .style("top", (pos.y - pos.height/2) + "px");
          });
      } // end of mousemove_function

    var mouseout_function = function(d) {
        d3.selectAll('.showtooltip').classed('hidden', true);
    } // end of mousemove_function

Running code here.


Related Query

More Query from same tag