为什么悬停在我的 d3 地图上无法正常工作？

Question

I'm building a map with d3, but for some reason, the hovering does not work properly. A lot of the times I hover over a feature it does not react by changing its color, only after doing so repeatedly. Some features do not react at all.

 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);

 path { stroke: rgb(0, 0, 0); stroke-width: 1px; fill: none; } 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>

I have significantly reduced the json file size using toposimplify, but the path complexity doesn't seem to be it.

Answer 1

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>