如何解决为什么在d3地图上悬停无法正常工作？
我正在使用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","fid": 2323,"GEN": "Borgholzhausen","LSG_perc": 62.17,"perc_5km": 96.32,"pop_dens": 154,"pop_tot": 8696
},"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]
]
]
}
},"fid": 2324,"GEN": "Gütersloh","LSG_perc": 50.36,"perc_5km": 98.96,"pop_dens": 841,"pop_tot": 94150
},"coordinates": [
[
[8.380552646728161,[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],51.973371304133991]
]
]
}
},"fid": 2325,"GEN": "Halle (Westf.)","LSG_perc": 65.37,"perc_5km": 97.2,"pop_dens": 301,"pop_tot": 20963
},"coordinates": [
[
[8.352178370332441,[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],52.094516214124802]
]
]
}
},"fid": 2326,"GEN": "Harsewinkel","LSG_perc": 82.41,"perc_5km": 1.55,"pop_dens": 239,"perc_10km": 99.73,"pop_tot": 24012
},"coordinates": [
[
[8.243860199686191,[8.29991960990742,51.9853007631541],[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],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);
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>我已经使用toposimplify大大减小了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","fid": 2323,"GEN": "Borgholzhausen","LSG_perc": 62.17,"perc_5km": 96.32,"pop_dens": 154,"pop_tot": 8696
},"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]
]
]
}
},"fid": 2324,"GEN": "Gütersloh","LSG_perc": 50.36,"perc_5km": 98.96,"pop_dens": 841,"pop_tot": 94150
},"coordinates": [
[
[8.380552646728161,[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],51.973371304133991]
]
]
}
},"fid": 2325,"GEN": "Halle (Westf.)","LSG_perc": 65.37,"perc_5km": 97.2,"pop_dens": 301,"pop_tot": 20963
},"coordinates": [
[
[8.352178370332441,[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],52.094516214124802]
]
]
}
},"fid": 2326,"GEN": "Harsewinkel","LSG_perc": 82.41,"perc_5km": 1.55,"pop_dens": 239,"perc_10km": 99.73,"pop_tot": 24012
},"coordinates": [
[
[8.243860199686191,[8.29991960990742,51.9853007631541],[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],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);
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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。