Home > OS >  D3 append data to div when region on map is clicked
D3 append data to div when region on map is clicked

Time：05-26

I'm quite new to D3, so please bear with my limited understanding. However, I'm glad for any feedback.

My goal is to draw a map based on a json file, and when a user clicks on a particular region, information over that region stored in the json is carried over to update a div element.

Drawing the map works well but I really don't find a way update the div "infobox" element dynamically when a region on the map is clicked.

Here's my code (or codepen):

This is the HTML:

<div id="default3" style="background-color:white;" > 
  <div id="infobox"> 
   <p><span id="gname"></span> Wählen Sie eine Gemeinde aus: </p>
    <p><span id="areaha"></span>  </p>
  </div>
</div>
<div id="zuständig"> 
Testtext <br>
Test phone number <a href="tel: 41 123456789">Tel:  41 123456789</a>, <a href="mailto:[email protected]">E-Mail: [email protected]</a> 
</div>

This is the Javascript:

var w = 500;
var h = 500;
var svg = d3.select("div#default3").append("svg").attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 "   w   " "   h).style("background","#c9e8fd")
.classed("svg-content", true);
var svg2 = d3.select("div#default3").append("svg")

var projection = d3.geoMercator().translate([w/2, h/2]).scale(50000).center([8.548589899,47.15309567]);
var path = d3.geoPath().projection(projection);

var map = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"1701","properties":{"name": "Baar", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 2485, "X_MIN": 680116, "X_MAX": 686287, "Y_MIN": 222816, "Y_MAX": 230856, "X_CNTR": 682600, "Y_CNTR": 227800, "Z_MIN": 419, "Z_MAX": 841, "Z_AVG": 531, "Z_MED": 520, "Z_CNTR": 445, "E_MIN": 2680116, "E_MAX": 2686287, "N_MIN": 1222816, "N_MAX": 1230856, "E_CNTR": 2682600, "N_CNTR": 1227800, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.574363083557836, 47.21706812989359 ], [ 8.577749613288111, 47.215011706103219 ], [ 8.576129062899831, 47.212032985974268 ], [ 8.561539972359638, 47.203882617691455 ], [ 8.557552604746339, 47.194817768412044 ], [ 8.557244754483197, 47.186248443922757 ], [ 8.554398710359168, 47.181794306956746 ], [ 8.560778412848412, 47.173910281626519 ], [ 8.559117488870253, 47.165859863203018 ], [ 8.561384354255475, 47.159890945858365 ], [ 8.560275553641809, 47.154798812828808 ], [ 8.563597065244437, 47.154010950380737 ], [ 8.562838131938173, 47.15295517749292 ], [ 8.558540006941621, 47.150867920584112 ], [ 8.558501419349682, 47.15087498685179 ], [ 8.555291165831276, 47.157370297474216 ], [ 8.551342320685508, 47.156276363498684 ], [ 8.543679267101627, 47.157465336542401 ], [ 8.535951863736321, 47.164940315479079 ], [ 8.536293022823976, 47.168043966644724 ], [ 8.5397311661049, 47.169056837496512 ], [ 8.539069556134105, 47.171367603461363 ], [ 8.53559303974613, 47.174662029650463 ], [ 8.530554339832346, 47.173676871307201 ], [ 8.529344865027788, 47.17629102113564 ], [ 8.523346138598873, 47.178906406762174 ], [ 8.52756304680041, 47.18323386967333 ], [ 8.525258436702931, 47.185849922878994 ], [ 8.523382565003908, 47.186430189628375 ], [ 8.520630765439529, 47.182751417086692 ], [ 8.516618666718474, 47.18206585376663 ], [ 8.506786347744949, 47.188078672237403 ], [ 8.50054711712796, 47.184166035876821 ], [ 8.497364669858559, 47.186360817103917 ], [ 8.499877703474164, 47.189721561701816 ], [ 8.4996184797614, 47.192909776148298 ], [ 8.503836336388623, 47.19772679331934 ], [ 8.496166550984272, 47.200144249999916 ], [ 8.496470339921531, 47.20365874708618 ], [ 8.50271249624295, 47.208775140954153 ], [ 8.49839421947333, 47.212069531500916 ], [ 8.512332083786385, 47.215518958954426 ], [ 8.512563831979756, 47.219414804884863 ], [ 8.531079447754902, 47.217562733739989 ], [ 8.5326170255299, 47.221369414029837 ], [ 8.536362115720015, 47.220600668325694 ], [ 8.539155139361812, 47.222905497500477 ], [ 8.543440106770262, 47.222047006513243 ], [ 8.552954839643645, 47.221655523916631 ], [ 8.553836421582767, 47.223237112064297 ], [ 8.560344781729905, 47.219544134669995 ], [ 8.574363083557836, 47.21706812989359 ] ] ] ] } },
{"type":"Feature","id":"1702","properties":{"name": "Cham", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 1773, "X_MIN": 673934, "X_MAX": 678885, "Y_MIN": 224570, "Y_MAX": 231889, "X_CNTR": 677400, "Y_CNTR": 226100, "Z_MIN": 387, "Z_MAX": 468, "Z_AVG": 423, "Z_MED": 425, "Z_CNTR": 414, "E_MIN": 2673934, "E_MAX": 2678885, "N_MIN": 1224570, "N_MAX": 1231889, "E_CNTR": 2677400, "N_CNTR": 1226100, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.446639984374663, 47.223378925509728 ], [ 8.447923373865144, 47.220109727055956 ], [ 8.452096960209827, 47.219600417225202 ], [ 8.452944758306009, 47.217760568621372 ], [ 8.456678015754976, 47.218571838952265 ], [ 8.461402994994117, 47.213631061500841 ], [ 8.470090427865324, 47.213404438513024 ], [ 8.473835673159703, 47.210624265133092 ], [ 8.473296587156355, 47.20852534322114 ], [ 8.476219839913568, 47.210021420919006 ], [ 8.479897424251535, 47.208621545882352 ], [ 8.473914888453578, 47.207381748287901 ], [ 8.476795078387987, 47.205586049916718 ], [ 8.468986058968401, 47.198863614230689 ], [ 8.475071503183424, 47.195796147715789 ], [ 8.473350807222008, 47.19321227816566 ], [ 8.478111649485212, 47.189897691444614 ], [ 8.477088357376482, 47.185323254532754 ], [ 8.475715596314114, 47.183116921382293 ], [ 8.466727136087206, 47.178382510609993 ], [ 8.461462374888836, 47.178552995575096 ], [ 8.453869571792026, 47.173782555928213 ], [ 8.448469235421182, 47.175827036141804 ], [ 8.447381652392583, 47.180102806850492 ], [ 8.435012704625866, 47.182759535013595 ], [ 8.425578463967254, 47.190306755459531 ], [ 8.422956600520612, 47.199190179474023 ], [ 8.425494282605229, 47.202252182490028 ], [ 8.415767280977155, 47.215959197018563 ], [ 8.417025830447066, 47.233772005320631 ], [ 8.41827718044482, 47.226771532975206 ], [ 8.421684644898367, 47.223320678310493 ], [ 8.429758733483061, 47.224951017553032 ], [ 8.437157020624317, 47.223686548401247 ], [ 8.441121669856212, 47.225215216385806 ], [ 8.443800335498009, 47.222637513284667 ], [ 8.446639984374663, 47.223378925509728 ] ] ] ] } },
{"type":"Feature","id":"1703","properties":{"name": "Hünenberg", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 1841, "X_MIN": 672418, "X_MAX": 677552, "Y_MIN": 223040, "Y_MAX": 233506, "X_CNTR": 674900, "Y_CNTR": 225200, "Z_MIN": 386, "Z_MAX": 496, "Z_AVG": 415, "Z_MED": 397, "Z_CNTR": 447, "E_MIN": 2672418, "E_MAX": 2677552, "N_MIN": 1223040, "N_MAX": 1233506, "E_CNTR": 2674900, "N_CNTR": 1225200, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.41399877452896, 47.243670898834004 ], [ 8.416486668270229, 47.241322260155812 ], [ 8.414195709659452, 47.239154921884492 ], [ 8.417025830447066, 47.233772005320631 ], [ 8.415767280977155, 47.215959197018563 ], [ 8.425494282605229, 47.202252182490028 ], [ 8.422956600520612, 47.199190179474023 ], [ 8.425578463967254, 47.190306755459531 ], [ 8.435012704625866, 47.182759535013595 ], [ 8.447381652392583, 47.180102806850492 ], [ 8.448469235421182, 47.175827036141804 ], [ 8.453869571792026, 47.173782555928213 ], [ 8.452574702205602, 47.171278918477356 ], [ 8.455679445550032, 47.167139647156311 ], [ 8.449283039472595, 47.164394543195357 ], [ 8.446716925810644, 47.15884367702634 ], [ 8.430062765957206, 47.15797370341965 ], [ 8.429866961501867, 47.155730595746064 ], [ 8.424061396016997, 47.156233989385775 ], [ 8.416210583968919, 47.1541810109427 ], [ 8.414208577273302, 47.157056332488516 ], [ 8.414523476745208, 47.157395029191996 ], [ 8.415304129651181, 47.164129705136709 ], [ 8.411878211443202, 47.173264370965867 ], [ 8.40252305360867, 47.176692461674122 ], [ 8.400263233063951, 47.18358189295482 ], [ 8.405292241537461, 47.195727625503061 ], [ 8.400486077300734, 47.20832981345157 ], [ 8.40081784279724, 47.215096577273179 ], [ 8.396486113259806, 47.219965554935023 ], [ 8.396021387219646, 47.228876166368877 ], [ 8.405824046318724, 47.236715910183563 ], [ 8.40812851571196, 47.242462433176122 ], [ 8.410801678201864, 47.245495609715405 ], [ 8.410073365007364, 47.248375752391922 ], [ 8.41399877452896, 47.243670898834004 ] ] ] ] } },
{"type":"Feature","id":"1704","properties":{"name": "Menzingen", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 2751, "X_MIN": 684571, "X_MAX": 693051, "Y_MIN": 222511, "Y_MAX": 228913, "X_CNTR": 687300, "Y_CNTR": 226000, "Z_MIN": 510, "Z_MAX": 1208, "Z_AVG": 819, "Z_MED": 803, "Z_CNTR": 809, "E_MIN": 2684571, "E_MAX": 2693051, "N_MIN": 1222511, "N_MAX": 1228913, "E_CNTR": 2687300, "N_CNTR": 1226000, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.610796547527301, 47.202682085059507 ], [ 8.615157190374344, 47.19934685405979 ], [ 8.617393145767386, 47.192289038134611 ], [ 8.620901415172877, 47.190329657368494 ], [ 8.620629861905112, 47.187746070518699 ], [ 8.628113799231242, 47.179512634649889 ], [ 8.623993307337624, 47.173338601394185 ], [ 8.632798241723968, 47.171871448549524 ], [ 8.639363926664023, 47.171469261222754 ], [ 8.641671450294997, 47.168929387216004 ], [ 8.652286176499905, 47.171038156066963 ], [ 8.660730277654967, 47.170310373113757 ], [ 8.661229145199732, 47.160951267179975 ], [ 8.665773195360254, 47.15966567910035 ], [ 8.660390697982068, 47.158012677643455 ], [ 8.659537577750591, 47.151639608081702 ], [ 8.636659395186847, 47.151490364862774 ], [ 8.622462916156875, 47.153427923444276 ], [ 8.617822930062164, 47.15169363911626 ], [ 8.612129896348389, 47.154374062160201 ], [ 8.59986962365317, 47.153480774964926 ], [ 8.594513672944244, 47.150506485939502 ], [ 8.591289367451356, 47.150447401837972 ], [ 8.587295774306398, 47.153437863491163 ], [ 8.580227447704887, 47.150894697208713 ], [ 8.569010063863216, 47.150940209784842 ], [ 8.56490422564058, 47.148063407898846 ], [ 8.562838131938173, 47.15295517749292 ], [ 8.563597065244437, 47.154010950380737 ], [ 8.560275553641809, 47.154798812828808 ], [ 8.561384354255475, 47.159890945858365 ], [ 8.559117488870253, 47.165859863203018 ], [ 8.560778412848412, 47.173910281626519 ], [ 8.554398710359168, 47.181794306956746 ], [ 8.557244754483197, 47.186248443922757 ], [ 8.558639471154235, 47.185330436294286 ], [ 8.565217715342987, 47.188221463084666 ], [ 8.568104311894709, 47.187439068081339 ], [ 8.575958692034058, 47.193503601065608 ], [ 8.585494318174167, 47.191319297875168 ], [ 8.592543848297007, 47.187063408106276 ], [ 8.600538318279941, 47.189982924692998 ], [ 8.609243331108823, 47.187475244578536 ], [ 8.611181977562538, 47.188985525896747 ], [ 8.60726639973281, 47.192516774978934 ], [ 8.607492915891344, 47.201048918436229 ], [ 8.603149949772485, 47.203038088195747 ], [ 8.606041239212393, 47.205241984355496 ], [ 8.610796547527301, 47.202682085059507 ] ] ] ] } },
{"type":"Feature","id":"1705","properties":{"name": "Neuheim", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 793, "X_MIN": 684755, "X_MAX": 688863, "Y_MIN": 226647, "Y_MAX": 230381, "X_CNTR": 686100, "Y_CNTR": 228900, "Z_MIN": 481, "Z_MAX": 768, "Z_AVG": 653, "Z_MED": 661, "Z_CNTR": 664, "E_MIN": 2684755, "E_MAX": 2688863, "N_MIN": 1226647, "N_MAX": 1230381, "E_CNTR": 2686100, "N_CNTR": 1228900, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.577168878118224, 47.218660386367645 ], [ 8.583390199776977, 47.217486699655936 ], [ 8.58101389764583, 47.214567079047718 ], [ 8.582601548333454, 47.210645577658383 ], [ 8.587879720218901, 47.212569933088012 ], [ 8.594160573909701, 47.212053697078979 ], [ 8.59769222806848, 47.208944738028933 ], [ 8.596328429443924, 47.204890712606613 ], [ 8.598350905689687, 47.201773611320178 ], [ 8.603149949772485, 47.203038088195747 ], [ 8.607492915891344, 47.201048918436229 ], [ 8.60726639973281, 47.192516774978934 ], [ 8.611181977562538, 47.188985525896747 ], [ 8.609243331108823, 47.187475244578536 ], [ 8.600538318279941, 47.189982924692998 ], [ 8.592543848297007, 47.187063408106276 ], [ 8.585494318174167, 47.191319297875168 ], [ 8.575958692034058, 47.193503601065608 ], [ 8.568104311894709, 47.187439068081339 ], [ 8.565217715342987, 47.188221463084666 ], [ 8.558639471154235, 47.185330436294286 ], [ 8.557244754483197, 47.186248443922757 ], [ 8.557552604746339, 47.194817768412044 ], [ 8.561539972359638, 47.203882617691455 ], [ 8.576129062899831, 47.212032985974268 ], [ 8.577749613288111, 47.215011706103219 ], [ 8.574363083557836, 47.21706812989359 ], [ 8.577168878118224, 47.218660386367645 ] ] ] ] } },
{"type":"Feature","id":"1706","properties":{"name": "Oberägeri", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 3003, "X_MIN": 687663, "X_MAX": 695749, "Y_MIN": 216326, "Y_MAX": 224372, "X_CNTR": 689200, "Y_CNTR": 221100, "Z_MIN": 723, "Z_MAX": 1422, "Z_AVG": 915, "Z_MED": 925, "Z_CNTR": 736, "E_MIN": 2687663, "E_MAX": 2695749, "N_MIN": 1216326, "N_MAX": 1224372, "E_CNTR": 2689200, "N_CNTR": 1221100, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.610834003974261, 47.118201258995896 ], [ 8.609063923087566, 47.114992364353142 ], [ 8.599358767736799, 47.115481821509277 ], [ 8.601317601276365, 47.121115694378553 ], [ 8.610834003974261, 47.118201258995896 ] ] ], [ [ [ 8.695822004487972, 47.162940182803048 ], [ 8.701158410928659, 47.150946112328803 ], [ 8.68849684576012, 47.146083753031903 ], [ 8.6842565059601, 47.140784637214253 ], [ 8.68706729635487, 47.1363098104339 ], [ 8.68178477223192, 47.125023013451418 ], [ 8.678274835198206, 47.124526432616669 ], [ 8.67072358459937, 47.119122480500884 ], [ 8.671818497111264, 47.115685574958988 ], [ 8.659800641300127, 47.114677914186792 ], [ 8.659773489172197, 47.11092135096083 ], [ 8.649317174184739, 47.103438734270476 ], [ 8.644910552442544, 47.095860217570227 ], [ 8.641343422265862, 47.09438667261999 ], [ 8.634636519828435, 47.093345190094517 ], [ 8.611784251199195, 47.094974107703713 ], [ 8.608699200635833, 47.094451867948422 ], [ 8.607450045473028, 47.09199704725728 ], [ 8.605713486461259, 47.105323386760574 ], [ 8.610638490040943, 47.104179609823674 ], [ 8.618229544047518, 47.106080274456261 ], [ 8.61545722326067, 47.107265526157249 ], [ 8.615303160279016, 47.109762307773025 ], [ 8.610877647625879, 47.109005492955973 ], [ 8.610572668356212, 47.113710280835477 ], [ 8.621484448655124, 47.114195457109091 ], [ 8.624364460226401, 47.113034051695344 ], [ 8.624319217527326, 47.10756942313666 ], [ 8.63065702169243, 47.102264682808006 ], [ 8.640093095917059, 47.103580246542862 ], [ 8.64333123044711, 47.114354705967337 ], [ 8.630147692919845, 47.129705018570434 ], [ 8.620017891442906, 47.133433133029662 ], [ 8.613000362263705, 47.132054128068546 ], [ 8.604675188818925, 47.137448096867864 ], [ 8.598008216011726, 47.136915343575573 ], [ 8.598311653363494, 47.145254373829459 ], [ 8.594513672944244, 47.150506485939502 ], [ 8.59986962365317, 47.153480774964926 ], [ 8.612129896348389, 47.154374062160201 ], [ 8.617822930062164, 47.15169363911626 ], [ 8.622462916156875, 47.153427923444276 ], [ 8.636659395186847, 47.151490364862774 ], [ 8.659537577750591, 47.151639608081702 ], [ 8.660390697982068, 47.158012677643455 ], [ 8.665773195360254, 47.15966567910035 ], [ 8.674978204275737, 47.159444857675219 ], [ 8.692194743996895, 47.163400348676547 ], [ 8.695822004487972, 47.162940182803048 ] ] ] ] } },
{"type":"Feature","id":"1707","properties":{"name": "Risch", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 1486, "X_MIN": 673814, "X_MAX": 679700, "Y_MIN": 218550, "Y_MAX": 224986, "X_CNTR": 675100, "Y_CNTR": 221600, "Z_MIN": 400, "Z_MAX": 679, "Z_AVG": 440, "Z_MED": 429, "Z_CNTR": 428, "E_MIN": 2673814, "E_MAX": 2679700, "N_MIN": 1218550, "N_MAX": 1224986, "E_CNTR": 2675100, "N_CNTR": 1221600, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.467037874363832, 47.118535738090351 ], [ 8.454105924336865, 47.113696624217752 ], [ 8.449443131650529, 47.130961238436392 ], [ 8.445423932875574, 47.1288462727031 ], [ 8.441609146223463, 47.129473319398116 ], [ 8.430394442597567, 47.123319941231003 ], [ 8.420315977824389, 47.122628757099747 ], [ 8.415394210144473, 47.124415272996622 ], [ 8.416758971969584, 47.130557447577523 ], [ 8.41220557848721, 47.140566751974859 ], [ 8.414867473099555, 47.145261503950955 ], [ 8.411953002750403, 47.153606946803563 ], [ 8.414208577273302, 47.157056332488516 ], [ 8.416210583968919, 47.1541810109427 ], [ 8.424061396016997, 47.156233989385775 ], [ 8.429866961501867, 47.155730595746064 ], [ 8.430062765957206, 47.15797370341965 ], [ 8.446716925810644, 47.15884367702634 ], [ 8.449283039472595, 47.164394543195357 ], [ 8.455679445550032, 47.167139647156311 ], [ 8.461608952187399, 47.155910763992381 ], [ 8.4611397923645, 47.15183172722115 ], [ 8.457306993673274, 47.147912126865194 ], [ 8.457908213947251, 47.141418023977018 ], [ 8.468822253828129, 47.136848201487282 ], [ 8.463645018969197, 47.129294379448638 ], [ 8.464122819256579, 47.121590136019677 ], [ 8.467037874363832, 47.118535738090351 ] ] ] ] } },
{"type":"Feature","id":"1708","properties":{"name": "Steinhausen", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 504, "X_MIN": 678073, "X_MAX": 680715, "Y_MIN": 226515, "Y_MAX": 229587, "X_CNTR": 679300, "Y_CNTR": 227900, "Z_MIN": 411, "Z_MAX": 528, "Z_AVG": 443, "Z_MED": 435, "Z_CNTR": 430, "E_MIN": 2678073, "E_MAX": 2680715, "N_MIN": 1226515, "N_MAX": 1229587, "E_CNTR": 2679300, "N_CNTR": 1227900, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.49839421947333, 47.212069531500916 ], [ 8.50271249624295, 47.208775140954153 ], [ 8.496470339921531, 47.20365874708618 ], [ 8.496166550984272, 47.200144249999916 ], [ 8.503836336388623, 47.19772679331934 ], [ 8.4996184797614, 47.192909776148298 ], [ 8.499877703474164, 47.189721561701816 ], [ 8.488660700628294, 47.185134834421724 ], [ 8.485540131055691, 47.186693432161348 ], [ 8.477088357376482, 47.185323254532754 ], [ 8.478111649485212, 47.189897691444614 ], [ 8.473350807222008, 47.19321227816566 ], [ 8.475071503183424, 47.195796147715789 ], [ 8.468986058968401, 47.198863614230689 ], [ 8.476795078387987, 47.205586049916718 ], [ 8.473914888453578, 47.207381748287901 ], [ 8.479897424251535, 47.208621545882352 ], [ 8.489131825620536, 47.210813665472891 ], [ 8.49839421947333, 47.212069531500916 ] ] ] ] } },
{"type":"Feature","id":"1709","properties":{"name": "Unterägeri", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 2562, "X_MIN": 683681, "X_MAX": 689775, "Y_MIN": 215401, "Y_MAX": 223133, "X_CNTR": 686900, "Y_CNTR": 221300, "Z_MIN": 684, "Z_MAX": 1579, "Z_AVG": 901, "Z_MED": 859, "Z_CNTR": 725, "E_MIN": 2683681, "E_MAX": 2689775, "N_MIN": 1215401, "N_MAX": 1223133, "E_CNTR": 2686900, "N_CNTR": 1221300, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.594513672944244, 47.150506485939502 ], [ 8.598311653363494, 47.145254373829459 ], [ 8.598008216011726, 47.136915343575573 ], [ 8.588369168161412, 47.137650996437152 ], [ 8.593694489526428, 47.133476782538082 ], [ 8.595680723183504, 47.128362467567882 ], [ 8.591395507796152, 47.12272225569204 ], [ 8.601317601276365, 47.121115694378553 ], [ 8.599358767493174, 47.115481810266921 ], [ 8.609063923087566, 47.114992364353142 ], [ 8.610834003974261, 47.118201258995896 ], [ 8.621484448655124, 47.114195457109091 ], [ 8.610572668356212, 47.113710280835477 ], [ 8.610877647625879, 47.109005492955973 ], [ 8.615303160279016, 47.109762307773025 ], [ 8.61545722326067, 47.107265526157249 ], [ 8.618229544047518, 47.106080274456261 ], [ 8.610638490040943, 47.104179609823674 ], [ 8.605713486461259, 47.105323386760574 ], [ 8.607450045473028, 47.09199704725728 ], [ 8.595487135703667, 47.091290358970262 ], [ 8.587329997488803, 47.085681404760763 ], [ 8.577592363475485, 47.084484573918672 ], [ 8.566335765639648, 47.095868040771101 ], [ 8.55902034719384, 47.106583403721224 ], [ 8.561612602252222, 47.108975907176763 ], [ 8.559901503867325, 47.114463679671481 ], [ 8.556173983086852, 47.116821153053657 ], [ 8.549185683973169, 47.117243585321333 ], [ 8.545097267943609, 47.122964924718673 ], [ 8.545588562843543, 47.126943569647828 ], [ 8.541666145936555, 47.133838738009146 ], [ 8.543469541023963, 47.141228691964699 ], [ 8.558385115648559, 47.150794685422369 ], [ 8.558540006941621, 47.150867920584112 ], [ 8.562838131938173, 47.15295517749292 ], [ 8.56490422564058, 47.148063407898846 ], [ 8.569010063863216, 47.150940209784842 ], [ 8.580227447704887, 47.150894697208713 ], [ 8.587295774306398, 47.153437863491163 ], [ 8.591289367451356, 47.150447401837972 ], [ 8.594513672944244, 47.150506485939502 ] ] ] ] } },
{"type":"Feature","id":"1710","properties":{"name": "Walchwil", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 1354, "X_MIN": 680043, "X_MAX": 685613, "Y_MIN": 215996, "Y_MAX": 220189, "X_CNTR": 681700, "Y_CNTR": 217200, "Z_MIN": 413, "Z_MAX": 1250, "Z_AVG": 789, "Z_MED": 898, "Z_CNTR": 446, "E_MIN": 2680043, "E_MAX": 2685613, "N_MIN": 1215996, "N_MAX": 1220189, "E_CNTR": 2681700, "N_CNTR": 1217200, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.545097267943609, 47.122964924718673 ], [ 8.549185683973169, 47.117243585321333 ], [ 8.556173983086852, 47.116821153053657 ], [ 8.559901503867325, 47.114463679671481 ], [ 8.561612602252222, 47.108975907176763 ], [ 8.55902034719384, 47.106583403721224 ], [ 8.566335765639648, 47.095868040771101 ], [ 8.563282382855592, 47.092611539558824 ], [ 8.544200080790008, 47.09445706470926 ], [ 8.539868270608254, 47.091999583926317 ], [ 8.525701888560791, 47.091654913569094 ], [ 8.522295312551746, 47.090048298484213 ], [ 8.503686073925252, 47.108602184925999 ], [ 8.500382350477977, 47.114639274566194 ], [ 8.506782394159819, 47.119773695645563 ], [ 8.509107912195235, 47.124933440104286 ], [ 8.515959966620805, 47.125421795283437 ], [ 8.517796097103604, 47.127381774456502 ], [ 8.530799097054077, 47.12736397036339 ], [ 8.534252086608777, 47.120430748052918 ], [ 8.545097267943609, 47.122964924718673 ] ] ] ] } },
{"type":"Feature","id":"1711","properties":{"name": "Zug", "BZNR": 900, "KTNR": 9, "GRNR": 6, "AREA_HA": 2163, "X_MIN": 678486, "X_MAX": 686486, "Y_MIN": 215061, "Y_MAX": 227088, "X_CNTR": 681800, "Y_CNTR": 224700, "Z_MIN": 409, "Z_MAX": 1579, "Z_AVG": 581, "Z_MED": 426, "Z_CNTR": 450, "E_MIN": 2678486, "E_MAX": 2686486, "N_MIN": 1215061, "N_MAX": 1227088, "E_CNTR": 2681800, "N_CNTR": 1224700, "SEE_HA": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.577592363475485, 47.084484573918672 ], [ 8.569542347835352, 47.081215582532089 ], [ 8.563330569090509, 47.081771601985707 ], [ 8.563282382855592, 47.092611539558824 ], [ 8.566335765639648, 47.095868040771101 ], [ 8.577592363475485, 47.084484573918672 ] ] ], [ [ [ 8.497364669858559, 47.186360817103917 ], [ 8.50054711712796, 47.184166035876821 ], [ 8.506786347744949, 47.188078672237403 ], [ 8.516618666718474, 47.18206585376663 ], [ 8.520630765439529, 47.182751417086692 ], [ 8.523382565231877, 47.186430200870667 ], [ 8.525258436702931, 47.185849922878994 ], [ 8.52756304680041, 47.18323386967333 ], [ 8.523346138598873, 47.178906406762174 ], [ 8.529344865027788, 47.17629102113564 ], [ 8.530554339832346, 47.173676871307201 ], [ 8.53559303974613, 47.174662029650463 ], [ 8.539069556134105, 47.171367603461363 ], [ 8.5397311661049, 47.169056837496512 ], [ 8.536293022823976, 47.168043966644724 ], [ 8.535951863966842, 47.164940326721435 ], [ 8.543679267101627, 47.157465336542401 ], [ 8.551342320919227, 47.156276374741061 ], [ 8.555291165831276, 47.157370297474216 ], [ 8.558501419349682, 47.15087498685179 ], [ 8.558385115648559, 47.150794685422369 ], [ 8.543469541023963, 47.141228691964699 ], [ 8.541666145936555, 47.133838738009146 ], [ 8.545588562843543, 47.126943569647828 ], [ 8.545097267943609, 47.122964924718673 ], [ 8.534252086608777, 47.120430748052918 ], [ 8.530799097054077, 47.12736397036339 ], [ 8.517796097103604, 47.127381774456502 ], [ 8.515959966620805, 47.125421795283437 ], [ 8.509107912195235, 47.124933440104286 ], [ 8.506782394159819, 47.119773695645563 ], [ 8.500382350477977, 47.114639274566194 ], [ 8.495444757230556, 47.123371952242799 ], [ 8.506343557196965, 47.136260425111438 ], [ 8.506041379409941, 47.146760617880133 ], [ 8.511198630544582, 47.154054962739224 ], [ 8.514476701115894, 47.169475087264608 ], [ 8.496964114146397, 47.176853840537611 ], [ 8.479356696246692, 47.178537851784647 ], [ 8.478699018345523, 47.181976400434017 ], [ 8.475715596314114, 47.183116921382293 ], [ 8.477088357376482, 47.185323254532754 ], [ 8.485540131055691, 47.186693432161348 ], [ 8.488660700628294, 47.185134834421724 ], [ 8.499877703697207, 47.18972157294418 ], [ 8.497364669858559, 47.186360817103917 ] ] ] ] } },
{"type":"Feature","id":"9001","properties":{"name": "Zugersee", "BZNR": 0, "KTNR": 0, "GRNR": 0, "AREA_HA": 0, "X_MIN": 676884, "X_MAX": 682743, "Y_MIN": 212835, "Y_MAX": 226295, "X_CNTR": 681200, "Y_CNTR": 215500, "Z_MIN": 0, "Z_MAX": 0, "Z_AVG": 0, "Z_MED": 0, "Z_CNTR": 0, "E_MIN": 2676884, "E_MAX": 2682743, "N_MIN": 1212835, "N_MAX": 1226295, "E_CNTR": 2681200, "N_CNTR": 1215500, "SEE_HA": 3844 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.518902173309231, 47.06147872836263 ], [ 8.514157331925635, 47.061431835819675 ], [ 8.508744413418153, 47.068102828272814 ], [ 8.487080741258049, 47.078715603850981 ], [ 8.470197146383185, 47.087752326019071 ], [ 8.463746648213, 47.095861135297518 ], [ 8.476220497090168, 47.106269594515368 ], [ 8.486089982167478, 47.109629176249193 ], [ 8.487019430723644, 47.113915680957263 ], [ 8.473291177191017, 47.114414378481086 ], [ 8.467037874363832, 47.118535738090351 ], [ 8.464122819256575, 47.121590136019684 ], [ 8.463645018969197, 47.129294379448638 ], [ 8.468822254044422, 47.136848212729809 ], [ 8.457908213947251, 47.141418023977018 ], [ 8.457306993673294, 47.147912126865215 ], [ 8.461139792364509, 47.151831727221165 ], [ 8.461608952187399, 47.155910763992381 ], [ 8.455679445763687, 47.167139658398824 ], [ 8.45257470220559, 47.171278918477356 ], [ 8.453869571792026, 47.173782555928213 ], [ 8.461462374888837, 47.17855299557511 ], [ 8.466727136087194, 47.17838251061 ], [ 8.475715596314114, 47.183116921382293 ], [ 8.478699018345518, 47.181976400434003 ], [ 8.479356696246692, 47.17853785178464 ], [ 8.496964114146397, 47.176853840537611 ], [ 8.514476701115896, 47.169475090658608 ], [ 8.511198630544582, 47.154054962739224 ], [ 8.506041379409945, 47.14676061788014 ], [ 8.506343557196965, 47.136260425111438 ], [ 8.495444757230567, 47.123371952242799 ], [ 8.500382350477977, 47.114639274566194 ], [ 8.503686073925252, 47.108602184925985 ], [ 8.522295312551762, 47.090048298484213 ], [ 8.528212474675744, 47.071055353894792 ], [ 8.518902173309231, 47.06147872836263 ] ] ] ] } },
{"type":"Feature","id":"9002","properties":{"name": "Aegerisee", "BZNR": 0, "KTNR": 0, "GRNR": 0, "AREA_HA": 0, "X_MIN": 687237, "X_MAX": 691411, "Y_MIN": 217452, "Y_MAX": 221450, "X_CNTR": 689500, "Y_CNTR": 219600, "Z_MIN": 0, "Z_MAX": 0, "Z_AVG": 0, "Z_MED": 0, "Z_CNTR": 0, "E_MIN": 2687237, "E_MAX": 2691411, "N_MIN": 1217452, "N_MAX": 1221450, "E_CNTR": 2689500, "N_CNTR": 1219600, "SEE_HA": 728 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.588369168161423, 47.137650996437166 ], [ 8.598008216011742, 47.136915343575595 ], [ 8.604675188818925, 47.137448096867864 ], [ 8.613000362263703, 47.13205412806856 ], [ 8.620017891442906, 47.133433133029662 ], [ 8.630147692919847, 47.129705018570426 ], [ 8.643331230447103, 47.114354705967344 ], [ 8.640093095917065, 47.103580246542862 ], [ 8.63065702169243, 47.102264682808006 ], [ 8.624319217527335, 47.10756942313666 ], [ 8.624364460226396, 47.113034051695351 ], [ 8.621484448655124, 47.114195457109091 ], [ 8.601317601276373, 47.121115694378538 ], [ 8.591395507796173, 47.122722255692032 ], [ 8.595680723183504, 47.128362467567882 ], [ 8.593694489526422, 47.133476782538082 ], [ 8.588369168161423, 47.137650996437166 ] ] ] ] } }
]};




Promise.all([map]).then(function(values){
  
svg.append('rect')
.attr('width', w)
.attr('height', h)
.attr('fill', 'white')

svg.selectAll("path")
  .append("g")
    .data(values[0].features)
    .enter()
    .append("path")
    .attr("d", path)
.style("stroke", "black")
.attr("opacity",function(d) {
if (d.id == 1702 | d.id == 1703 | d.id == 1704 | d.id==1705 | d.id==1708 | d.id==1710 | d.id == 1701 | d.id==1706 | d.id==1709) {
return ".5"
} else{
return "1"
}
})
.style("fill", function(d) {
  if (d.id == 1702 | d.id == 1703) {
    return "#529C07";//grün
  } else if  (d.id == 1711 | d.id==1707) {
return "#F28C08 ";//orange
}else if  (d.id == 1704 | d.id==1705 | d.id==1708 | d.id==1710) {
return "#FFF700";//gelb
}else if  (d.id == 1701 | d.id==1706 | d.id==1709) {
return "#0022FF";//blau
} else if  (d.id == 9001 | d.id==9002 ) {
return "#DEDEDE";//grau für seen
} else{
return "white"
}
})
.on('mouseover', function (d, i) {
      d3.select(this).transition()
           .duration('50')
           .attr('opacity', '1')})
.on('mouseout', function (d, i) {
if (d.id != 9001 | d.id!=9002){
      d3.select(this).transition()
           .duration('50')
           .attr('opacity', '.5')}})
.on("mousemove", function(d,i){
            d3.select(this)
                .append("svg:title")
                .text(function (d) { return d.properties.name })
})
  .on("click", function(d,i) {
            d3.select("#infobox")
                .select("#gname")
                  .text(function (d) { return "Ausgewählte Gemeinde: "   d.properties.name});
   d3.select("#infobox")
                .select("#areaha")
                  .text(function (d) { return "Hektar: "   d.properties.AREA_HA});
            })
;
  

});

Thanks for your support.

CodePudding user response：

Your .text functions access the wrong variable. You need to read the data from i, not d:

.on("click", function(d,i) {
  d3.select("#infobox")
    .select("#gname")
      .text(function (d) { return "Ausgewählte Gemeinde: "   i.properties.name});
  d3.select("#infobox")
    .select("#areaha")
      .text(function (d) { return "Hektar: "   i.properties.AREA_HA});
})

The .on("click" handler receives two inputs, (d,i). The first provides the event that happened, with properties such as mouse pointer coordinates. The second provides the data element that was clicked, i.e. one of the objects in your data array.

Note that there are many parts of this code that you should improve. For example:

  • You shouldn't need to select "#infobox" multiple times. Better store the selection and work on it from there.
  • The inner handler of the .text function receives an input d, which overshadows the outer variable d of the .on("click" handler. Better rename that inner variable.
  • Drawing and reacting are mixed up too much here. You should separate the steps of adding elements, styling them, and reacting to them. This kind of mixed up looks short and easy, but gets extremely nasty when you need to add things later on, esp. adding/removing/shifting elements.
  • The idea of data-driven documents (= "D3") is that properties within the data determine what they will look like. In your case, there should be a property that determines the color coding - you shouldn't check for individual IDs there.

Page link：https//www.codepudding.com/os/419856.html

Prev:Average use based on number of times an email address appears within a period
Next:D3js: Enlarge section of sunburst on hover
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding