score:2

Accepted answer

because you use fill: none for your shapes, the hitbox of each shape is very small - only at or near the stroke does it capture hits. just change that to fill: white; instead. and if you really don't want anything but the outline shown, you can even use fill: transparent; and it still works!

i've given the body a background here, because one of the centre shapes was removed, so it's actually on purpose that you don't have a hover effect there. i was afraid that giving it a fill: transparent would make that not clear enough.

var svg = d3.select('#map');
var width = 960,
  height = 500;


var gemeinden = {
  "type": "featurecollection",
  "name": "single_part_stats",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:ogc:1.3:crs84"
    }
  },
  "features": [{
      "type": "feature",
      "properties": {
        "id": null,
        "fid": 2322,
        "gen": "bielefeld",
        "lsg_perc": 48.03,
        "perc_5km": 94.43,
        "pop_dens": 1260,
        "perc_10km": 100.0,
        "pop_tot": 326428
      },
      "geometry": {
        "type": "polygon",
        "coordinates": [
          [
            [8.51349282274353, 52.114318817635095],
            [8.543621903249569, 52.107029115753292],
            [8.554007304689691, 52.101799517288285],
            [8.558504748007429, 52.107982034913697],
            [8.56715840329397, 52.106698292674295],
            [8.572334955000169, 52.097354635106093],
            [8.5635037459011, 52.091269556707694],
            [8.57052208738317, 52.076505059679484],
            [8.579659230328701, 52.075589715829295],
            [8.601261142831749, 52.089318050912183],
            [8.608064571365251, 52.088697293264595],
            [8.608691246887229, 52.078434711025992],
            [8.619965524114511, 52.077402956030902],
            [8.61681586004849, 52.067925176443289],
            [8.630899137728139, 52.060748447290294],
            [8.65427955728858, 52.060148838065487],
            [8.66354215355677, 52.053690745616088],
            [8.66097577728282, 52.044007159388798],
            [8.65503763028547, 52.034583392495001],
            [8.64154945234556, 52.025506328667383],
            [8.662044227193549, 52.013410608394381],
            [8.648563073180849, 51.992355288368508],
            [8.65401235430561, 51.978032833409699],
            [8.64315466989305, 51.970649028100489],
            [8.648111270898569, 51.960207608461779],
            [8.629599596210589, 51.945140372259992],
            [8.62527499324508, 51.936174326200792],
            [8.60633872354984, 51.927372634413601],
            [8.579937401741272, 51.920461434892182],
            [8.56057017516993, 51.924778823193883],
            [8.557142328911549, 51.919002965016496],
            [8.544442548397582, 51.916200727320785],
            [8.545370926701001, 51.92563016957579],
            [8.532516624280079, 51.926030057376195],
            [8.50598845406517, 51.914969777111196],
            [8.48670420038507, 51.944628170510285],
            [8.4723677648819, 51.945221160556379],
            [8.46630328780617, 51.950184227190398],
            [8.42790098134989, 51.946054844062793],
            [8.419644423639721, 51.959892886726479],
            [8.397036046777201, 51.956610934467889],
            [8.390105407816291, 51.968447608840783],
            [8.380552646728161, 51.973371304133991],
            [8.39353402932074, 51.974308308100689],
            [8.39967117111985, 51.969270516813175],
            [8.426880544594461, 51.974493790321993],
            [8.4372205370953, 51.9811018399296],
            [8.433969115467169, 51.985445337179399],
            [8.450792378730879, 51.988964546119789],
            [8.447856137308371, 51.994542345958195],
            [8.461113740172751, 52.018797520111903],
            [8.434029444525009, 52.028689758170394],
            [8.42046828655311, 52.043832261214192],
            [8.434407460986471, 52.049212669207094],
            [8.45302974882868, 52.050514654754586],
            [8.446455281996441, 52.067428711565086],
            [8.45880169132878, 52.077257341282596],
            [8.45769173655696, 52.086563052315199],
            [8.472397009535969, 52.090613497230102],
            [8.471538645027501, 52.100749008302301],
            [8.489410783013589, 52.109585227693003],
            [8.50129451056727, 52.107356448336397],
            [8.51349282274353, 52.114318817635095]
          ]
        ]
      }
    },
    {
      "type": "feature",
      "properties": {
        "id": null,
        "fid": 2323,
        "gen": "borgholzhausen",
        "lsg_perc": 62.17,
        "perc_5km": 96.32,
        "pop_dens": 154,
        "perc_10km": 100.0,
        "pop_tot": 8696
      },
      "geometry": {
        "type": "polygon",
        "coordinates": [
          [
            [8.368873745839061, 52.114764889584791],
            [8.362339419327, 52.110177442378095],
            [8.36667655918056, 52.100855524545402],
            [8.352178370332441, 52.094516214124802],
            [8.34174809804386, 52.082234019929381],
            [8.332858742793031, 52.085474354193494],
            [8.327186516882731, 52.077353434172593],
            [8.31500266309096, 52.079551547887377],
            [8.30167489641301, 52.058951528069592],
            [8.2704953179289, 52.051470484267995],
            [8.260184689558081, 52.04499015872139],
            [8.249980027356481, 52.056322514265595],
            [8.249909527572971, 52.0731428638775],
            [8.24509909144734, 52.080906298291289],
            [8.222078987045681, 52.085732589671586],
            [8.21564647828286, 52.082648935744196],
            [8.201445928237799, 52.088171599725605],
            [8.20891387921457, 52.096774289538075],
            [8.229590368871481, 52.108687992042086],
            [8.24589615402251, 52.121397298055385],
            [8.262539078696349, 52.120378483920192],
            [8.2667318844366, 52.132281201535584],
            [8.28821492557304, 52.134573584365683],
            [8.28525006202894, 52.125487837795298],
            [8.311215340700279, 52.118329087005989],
            [8.323918346166121, 52.125921998064797],
            [8.368873745839061, 52.114764889584791]
          ]
        ]
      }
    },
    {
      "type": "feature",
      "properties": {
        "id": null,
        "fid": 2324,
        "gen": "gütersloh",
        "lsg_perc": 50.36,
        "perc_5km": 98.96,
        "pop_dens": 841,
        "perc_10km": 100.0,
        "pop_tot": 94150
      },
      "geometry": {
        "type": "polygon",
        "coordinates": [
          [
            [8.380552646728161, 51.973371304133991],
            [8.390105407816291, 51.968447608840783],
            [8.397036046777201, 51.956610934467889],
            [8.419644423639721, 51.959892886726479],
            [8.42790098134989, 51.946054844062793],
            [8.46630328780617, 51.950184227190398],
            [8.4723677648819, 51.945221160556379],
            [8.48670420038507, 51.944628170510285],
            [8.50598845406517, 51.914969777111196],
            [8.50218069410349, 51.910559498861488],
            [8.470694483781971, 51.908714993285393],
            [8.456243920016931, 51.905441064644997],
            [8.447294058740169, 51.888785068722783],
            [8.456313011242059, 51.883188071343277],
            [8.4476925514002, 51.875556464524884],
            [8.416566759543731, 51.862015693122387],
            [8.39704775901186, 51.856955994007798],
            [8.381357263236559, 51.856546880147782],
            [8.36387167480879, 51.864004059531503],
            [8.34914817141942, 51.881817861714389],
            [8.331588292317649, 51.874535060499696],
            [8.3206429467064, 51.88705785841379],
            [8.33016344390278, 51.894791564196787],
            [8.31468176600684, 51.895803722784393],
            [8.31717957746843, 51.903769048991393],
            [8.31102815964285, 51.913384165076501],
            [8.287968172737521, 51.921362664313691],
            [8.29830415875221, 51.930872567139595],
            [8.30280777080098, 51.934384156141483],
            [8.318456075402331, 51.926893618685099],
            [8.331990592936179, 51.940688143315391],
            [8.31366872058959, 51.967706929543596],
            [8.36222401366075, 51.976130134750086],
            [8.380552646728161, 51.973371304133991]
          ]
        ]
      }
    },
    {
      "type": "feature",
      "properties": {
        "id": null,
        "fid": 2325,
        "gen": "halle (westf.)",
        "lsg_perc": 65.37,
        "perc_5km": 97.2,
        "pop_dens": 301,
        "perc_10km": 100.0,
        "pop_tot": 20963
      },
      "geometry": {
        "type": "polygon",
        "coordinates": [
          [
            [8.352178370332441, 52.094516214124802],
            [8.386238790237162, 52.078441315660797],
            [8.39394192195193, 52.065106919829987],
            [8.418726486454871, 52.044899673704194],
            [8.4094409526042, 52.035180812726992],
            [8.3815488586153, 52.019980747466299],
            [8.36768444197989, 52.020361991546594],
            [8.364212104860462, 52.014442737702197],
            [8.346757587361729, 52.018299935941407],
            [8.3235067587642, 52.013215119032878],
            [8.30064949107577, 52.003382365133703],
            [8.28823898604959, 51.994756402817686],
            [8.26617690345744, 52.000501553993693],
            [8.257123412529481, 52.008531677271286],
            [8.243860199686191, 52.010824147169807],
            [8.244875482806799, 52.023667411308985],
            [8.251194139090522, 52.026334738935176],
            [8.260184689558081, 52.04499015872139],
            [8.2704953179289, 52.051470484267995],
            [8.30167489641301, 52.058951528069592],
            [8.31500266309096, 52.079551547887377],
            [8.327186516882731, 52.077353434172593],
            [8.332858742793031, 52.085474354193494],
            [8.34174809804386, 52.082234019929381],
            [8.352178370332441, 52.094516214124802]
          ]
        ]
      }
    },
    {
      "type": "feature",
      "properties": {
        "id": null,
        "fid": 2326,
        "gen": "harsewinkel",
        "lsg_perc": 82.41,
        "perc_5km": 1.55,
        "pop_dens": 239,
        "perc_10km": 99.73,
        "pop_tot": 24012
      },
      "geometry": {
        "type": "polygon",
        "coordinates": [
          [
            [8.243860199686191, 52.010824147169807],
            [8.257123412529481, 52.008531677271286],
            [8.26617690345744, 52.000501553993693],
            [8.28823898604959, 51.994756402817686],
            [8.29991960990742, 51.9853007631541],
            [8.31366872058959, 51.967706929543596],
            [8.331990592936179, 51.940688143315391],
            [8.318456075402331, 51.926893618685099],
            [8.30280777080098, 51.934384156141483],
            [8.29830415875221, 51.930872567139595],
            [8.266285827778891, 51.938164115687286],
            [8.248017086289799, 51.935731704432285],
            [8.208737218327412, 51.94927269493499],
            [8.19484782673047, 51.949597886025089],
            [8.179308110480649, 51.939774495805793],
            [8.169532404607009, 51.926279877903092],
            [8.129090284651941, 51.951788777688783],
            [8.11298581914256, 51.956047662853202],
            [8.10681132539397, 51.971493447109196],
            [8.1143039539899, 51.9718097498289],
            [8.10732269406442, 51.992786171117885],
            [8.110954295297219, 52.001174216030591],
            [8.126152784689699, 52.00546953998559],
            [8.13051294207582, 52.001770311771082],
            [8.14045628525958, 52.010476844071093],
            [8.174493609478359, 52.004434898772097],
            [8.20111956670184, 52.004823533992202],
            [8.243860199686191, 52.010824147169807]
          ]
        ]
      }
    }
  ]
};

var projection = d3.geotransversemercator().fitsize([width, height], gemeinden);
var path = d3.geopath().projection(projection);
svg.selectall("path")
  .data(gemeinden.features)
  .enter().append("path")
  .attr("d", path);
body {
  background: darkblue;
}

path {
  stroke: rgb(0, 0, 0);
  stroke-width: 1px;
  fill: white;
}

path:hover {
  stroke-width: 2px;
  fill: rgb(214, 214, 214);
}
<svg id="map" width="960px" height="500px"></svg>
<script src="https://unpkg.com/topojson@3"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>


Related Query

More Query from same tag