我正在用d3构建一个地图，但由于某种原因，悬停无法正常工作。很多时候，我把鼠标悬停在一个功能上，它并没有通过改变颜色来做出反应，只是在重复这样做之后。有些功能根本没有反应。
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>我已经使用toposplify显著减少了json文件的大小，但路径复杂性似乎并不是这样
因为形状使用fill: none，所以每个形状的点击框都很小——只有在笔划处或笔划附近才能捕捉到点击。只需将其更改为fill: white;即可。如果你真的不想要任何东西，除了显示的轮廓，你甚至可以使用fill: transparent;，它仍然有效！
我在这里给了身体一个背景，因为其中一个中心形状被删除了，所以实际上是故意不在那里产生悬停效果。我担心给它一个fill: transparent会让它变得不够清楚。
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>