我一直在试验 D3 和地图。到目前为止，我看到的所有示例和教程都是从 GeoJSON 构建 SVG 并添加数据。但是我已经在 html 中有一个 SVG 地图，并且想使用 D3 将数据添加到路径中（并且能够在数据集之间切换，但这是下一个障碍）。
我已将 ID 添加到路径中，但找不到使用键功能将路径的 ID 与我的数据中的 ID 匹配的方法。
这是我的问题：这种匹配是否可能以及如何匹配？还是我应该使用 GeoJSON 路由？
这是我的简化页面和代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Bevolkingsprognose</title>
<script src="../d3/d3.v2.min.js"></script>
<style type="text/css">
g.provincies path {
fill: #FFFFFF;
}
</style>
</head>
<body>
<div class="kaart">
<svg version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" viewBox="0 0 288 288" xml:space="preserve" enable-background="new 0 0 288 288">
<g transform="scale(0.28,0.28) matrix(2.0833333 0 0 -2.0833333 300 300)">
<g class="provincies" color-interpolation="linearRGB">
<path id="limburg" d="M44.507297 -41.756513 L44.484249 -42.07919 L44.484249 -42.240529 L44.530346 -42.37882 L44.668636 -42.655401 L44.714733 -42.655401 L47.134816 -42.632352 L49.577947 -44.084402 L50.131109 -44.614515 L50.154157 -45.121581 L49.462705 -46.665824 L49.624044 -48.993713 L49.670141 -49.062858 L49.83148 -49.247245 L49.923673 -49.339439 L50.269399 -49.477729 L50.799513 -49.685165 L51.444868 -49.938698 L51.85974 -50.100037 L52.159368 -50.215278 L53.173499 -50.607101 L53.795806 -50.722344 L54.694693 -52.105248 L54.510306 -52.474023 L53.795806 -54.594476 L53.473128 -56.115671 L53.473128 -56.161768 L53.496176 -56.184816 L56.031501 -58.720141 L57.276115 -59.872562 L57.64489 -60.103046 L57.714035 -60.172191 L60.525941 -64.182614 L60.871667 -64.758824 L60.940812 -64.874066 L61.309587 -65.588567 L61.378732 -65.98039 L61.378732 -66.141729 L61.424828 -67.109762 L62.070184 -69.437651 L62.070184 -70.221297 L61.908845 -72.387847 L61.148248 -76.329125 L61.079103 -76.651803 L61.540071 -77.112771 L62.369814 -81.215387 L62.300668 -81.330629 L62.001039 -81.630259 L61.655313 -81.952936 L61.332635 -82.252566 L60.088021 -83.404986 L58.705116 -84.096438 L56.19284 -89.074895 L55.939308 -89.812444 L55.939308 -90.112073 L55.801017 -90.273412 L55.639678 -90.457799 L55.132613 -91.034009 L54.786887 -91.425832 L53.72666 -92.624349 L53.542273 -92.831785 L53.450079 -92.923979 L53.380934 -92.970075 L52.873869 -93.292753 L52.643385 -93.431044 L53.265692 -94.836996 L53.334838 -94.998335 L53.519225 -95.436255 L53.519225 -95.459304 L53.496176 -95.482352 L53.380934 -95.528449 L53.334838 -95.528449 L53.27337 -95.5054 L53.242644 -95.482352 L52.689482 -95.482352 L52.57424 -95.5054 L52.505095 -95.528449 L52.366804 -95.689788 L52.366804 -96.173804 L52.389853 -96.427337 L52.435949 -96.450385 L52.71253 -99.56192 L53.28874 -100.66824 L53.311789 -100.69129 L53.357886 -100.71434 L53.680564 -100.78349 L54.372016 -100.85263 L54.510306 -100.85263 L55.109565 -100.5069 L55.295119 -100.30852 L55.345653 -100.24775 L55.409194 -100.16118 L55.524436 -99.99984 L55.662726 -99.861549 L55.75492 -99.792404 L55.916259 -99.677162 L56.446373 -99.400581 L57.552696 -98.84742 L58.612923 -98.340354 L58.889504 -98.524742 L59.23523 -98.801323 L59.604005 -99.100952 L59.419617 -99.239242 L59.073891 -99.42363 L58.635971 -99.654114 L57.022583 -100.46081 L57.183922 -100.62215 L57.806229 -101.03702 L58.382439 -101.40579 L58.635971 -101.56713 L58.820358 -101.68237 L59.119988 -101.86676 L57.368309 -103.18052 L56.76905 -103.36491 L54.003241 -104.47123 L53.957144 -104.56342 L53.818854 -104.9322 L53.772757 -105.20878 L53.657515 -105.53146 L52.966063 -106.08462 L52.758627 -106.17681 L52.689482 -106.19986 L52.505095 -106.19986 L50.430738 -108.41251 L49.116979 -108.85043 L47.964559 -109.70322 L47.849316 -109.81846 L47.641881 -110.09504 L47.157864 -110.80954 L46.235928 -112.23854 L46.235928 -112.42293 L46.189831 -112.86085 L46.05154 -113.78279 L45.47533 -114.40509 L45.152652 -114.61253 L44.461201 -114.61253 L44.046329 -114.52034 L43.377925 -113.48316 L43.331828 -113.39097 L42.963054 -112.1694 L41.557101 -112.42293 L39.505793 -113.11438 L39.482744 -113.16048 L39.482744 -113.32182 L39.505793 -113.50621 L39.528841 -113.6445 L40.174196 -115.94934 L41.395762 -117.2631 L42.041117 -118.16199 L41.948924 -119.70623 L41.511004 -120.97389 L42.986102 -120.62817 L43.861942 -119.89062 L43.908039 -119.86757 L44.046329 -119.84452 L44.89912 -119.70623 L49.900625 -120.05195 L49.900625 -120.25939 L49.83148 -120.46683 L49.577947 -121.20438 L49.255269 -122.01107 L49.163076 -122.21851 L49.070882 -122.37984 L49.047833 -122.40289 L48.586865 -122.67947 L49.393559 -125.03041 L51.467917 -125.51443 L53.519225 -126.32112 L53.657515 -126.39027 L54.003241 -126.62075 L54.026289 -126.87428 L53.403983 -128.00366 L53.265692 -128.60291 L53.15045 -129.24827 L53.15045 -129.31741 L53.173499 -129.5479 L53.219595 -129.73229 L53.403983 -130.33155 L53.427031 -130.35459 L53.457757 -130.33155 L53.473128 -130.28545 L53.496176 -130.28545 L53.542273 -130.3085 L53.864951 -130.60813 L53.887999 -130.63117 L53.911048 -130.67727 L53.980193 -131.34567 L53.980193 -131.41482 L53.911048 -131.6453 L53.127402 -134.01929 L53.104353 -134.04234 L52.113272 -133.58137 L51.514013 -133.30479 L50.453786 -133.67356 L49.577947 -134.08844 L49.53185 -134.11148 L49.508802 -134.13453 L49.462705 -134.31892 L49.462705 -134.36502 L49.854528 -136.94644 L49.900625 -137.19997 L49.923673 -137.40741 L48.978688 -138.44458 L48.95564 -138.46763 L48.840398 -138.55983 L48.609914 -138.67507 L48.540769 -138.67507 L47.227009 -137.89142 L46.812138 -138.51373 L47.664929 -139.52786 L50.061963 -141.34868 L50.154157 -141.48697 L50.154157 -141.55612 L49.670141 -143.49219 L47.826268 -143.69962 L47.687977 -143.69962 L47.3653 -143.65352 L46.78909 -143.53828 L46.696896 -143.46914 L46.696896 -143.39999 L46.719944 -143.33085 L46.742993 -143.33085 L46.742993 -143.14646 L46.581654 -142.98512 L46.48946 -142.93902 L45.798008 -142.73159 L45.77496 -142.73159 L45.636669 -142.75464 L44.876072 -143.00817 L44.369007 -143.2156 L44.184619 -143.3078 L43.285731 -143.86096 L42.916957 -143.99925 L42.847812 -143.99925 L41.902827 -143.86096 L41.188326 -143.39999 L41.165278 -143.33085 L39.482744 -142.66244 L38.284227 -142.5011 L37.477533 -143.00817 L37.131807 -143.14646 L36.325112 -143.42304 L36.186822 -143.46914 L35.887193 -143.46914 L34.342949 -142.27062 L34.319901 -142.22452 L34.112465 -141.7866 L34.04332 -141.57917 L33.997223 -141.32564 L33.858933 -140.70333 L33.74369 -140.68028 L33.582352 -140.68028 L33.213577 -140.72638 L33.121384 -140.74943 L33.02919 -140.84162 L32.337738 -141.57917 L32.130302 -141.80965 L31.507995 -142.68549 L28.557799 -143.63048 L28.511702 -143.63048 L28.39646 -143.60743 L28.096831 -143.53828 L27.681959 -143.3539 L27.681959 -143.10036 L27.705008 -143.00817 L27.797201 -142.82378 L27.912443 -142.66244 L28.027685 -142.5472 L28.119879 -142.43196 L28.281218 -142.22452 L28.350363 -142.13233 L28.465605 -141.97099 L28.53475 -141.85575 L28.626944 -141.67136 L28.696089 -141.48697 L28.926573 -140.84162 L28.926573 -140.68028 L28.719137 -138.67507 L28.603896 -138.09886 L27.612814 -137.73008 L25.838087 -136.94644 L25.054441 -134.82598 L24.847005 -134.18063 L24.847005 -134.11148 L25.077489 -132.452 L25.192731 -131.6453 L25.400167 -131.43787 L25.630651 -131.29958 L26.783072 -130.65422 L27.474523 -130.33155 L28.304266 -129.34046 L28.350363 -129.27132 L28.442557 -129.08693 L28.488654 -128.97169 L28.511702 -128.8795 L28.580847 -128.57987 L28.580847 -128.32633 L28.557799 -128.0728 L28.557799 -127.91146 L28.626944 -127.77317 L28.742186 -127.65793 L28.880476 -127.58878 L29.087912 -127.51964 L29.295348 -127.51964 L29.364493 -127.54269 L29.456686 -127.58878 L29.779364 -127.86537 L31.738479 -124.26981 L32.406883 -123.60141 L32.499077 -123.50922 L32.568222 -123.41702 L32.568222 -123.14044 L32.545173 -123.0713 L32.499077 -122.9791 L32.406883 -122.84081 L32.337738 -122.74862 L32.268592 -122.67947 L32.130302 -122.56423 L31.899818 -122.44899 L31.807624 -122.42594 L31.646285 -122.42594 L31.554092 -122.47204 L31.484946 -122.51813 L31.43885 -122.56423 L31.369705 -122.65643 L31.346656 -122.70252 L31.300559 -122.77167 L31.185317 -122.88691 L31.070075 -122.9791 L31.00093 -123.00215 L30.816543 -123.04825 L30.56301 -123.04825 L30.28643 -122.90996 L30.240332 -122.86386 L30.194236 -122.79472 L30.102042 -122.63338 L30.102042 -122.33375 L30.148139 -122.21851 L30.171187 -122.17241 L31.116172 -120.72036 L31.254462 -120.58207 L31.300559 -120.55902 L31.392753 -120.53597 L31.556714 -120.47685 L31.656844 -120.42266 L31.734359 -120.37463 L31.968963 -120.21329 L32.960045 -118.78429 L33.006141 -118.71515 L33.098335 -118.53076 L33.490158 -116.52555 L33.121384 -115.48837 L32.890899 -114.3129 L33.374916 -113.11438 L34.481239 -112.37683 L35.080498 -112.30769 L35.472321 -110.25638 L36.555597 -108.94262 L37.293146 -108.20507 L35.979386 -107.35228 L35.794999 -107.16789 L35.748902 -107.09875 L35.725854 -107.05265 L35.702805 -106.98351 L35.679757 -106.86827 L35.679757 -106.72998 L35.818048 -106.33815 L35.864144 -106.24596 L35.910241 -106.17681 L36.64779 -105.27793 L36.670838 -105.25488 L38.261179 -103.89502 L38.722147 -103.57234 L36.855225 -101.3136 L36.763032 -101.2675 L36.693887 -101.2675 L35.426225 -101.77457 L34.319901 -102.53516 L33.720642 -100.76044 L33.6054 -100.11508 L33.098335 -99.700211 L33.006141 -99.631065 L31.623237 -99.008758 L31.531043 -99.100952 L31.254462 -99.308388 L29.295348 -99.953743 L29.249251 -99.953743 L26.322103 -99.400581 L25.676748 -98.501693 L25.630651 -98.225113 L25.515409 -98.155967 L25.35407 -98.063774 L24.939199 -97.856338 L24.570424 -97.694999 L23.948117 -97.441466 L20.052936 -95.851127 L21.919857 -95.482352 L22.887891 -95.159674 L23.348859 -94.998335 L23.394955 -94.975287 L23.418004 -94.952239 L23.694585 -93.200559 L23.717633 -93.039221 L23.740681 -92.785688 L23.740681 -92.209478 L23.76373 -91.656316 L23.786778 -91.080106 L23.809827 -90.619138 L23.855923 -90.480848 L23.971165 -90.273412 L24.20165 -89.904637 L24.386037 -89.628056 L25.031392 -88.683072 L26.80612 -86.170795 L33.121384 -84.211681 L37.592775 -82.851824 L39.528841 -82.252566 L41.165278 -80.984903 L43.400974 -78.933595 L41.580149 -75.660721 L39.759325 -72.595283 L39.736277 -72.595283 L39.667132 -72.480041 L39.574938 -72.318702 L39.551889 -72.272605 L39.25226 -70.543974 L39.021776 -69.184118 L38.906534 -68.492666 L38.284227 -66.717939 L37.339242 -60.33353 L39.436647 -60.702304 L40.151148 -60.817546 L40.404681 -60.863643 L40.635165 -60.90974 L40.727358 -60.955837 L40.865649 -61.04803 L41.211375 -61.34766 L41.349665 -61.48595 L41.534053 -61.647289 L41.672343 -61.762531 L41.995021 -61.762531 L43.424022 -61.62424 L43.585361 -61.601192 L43.954135 -61.48595 L44.461201 -61.324611 L45.682766 -60.932788 L46.166782 -60.771449 L46.258976 -60.725352 L47.388348 -60.149142 L47.549687 -60.056949 L47.734074 -59.964755 L47.895413 -59.89561 L47.987607 -59.89561 L48.702108 -60.448772 L48.909543 -60.656207 L49.716237 -61.647289 L50.730368 -61.04803 L50.638174 -60.978885 L50.522931 -60.840595 L50.384641 -60.656207 L50.292448 -60.517917 L50.246351 -60.425723 L50.200254 -60.310481 L50.10806 -60.0339 L50.085012 -59.941707 L49.485753 -57.521624 L49.186124 -55.332025 L49.163076 -55.101541 L49.070882 -54.848008 L49.001737 -54.709718 L48.932591 -54.594476 L48.886495 -54.525331 L48.471623 -54.110459 L47.3653 -53.027184 L46.512509 -52.497071 L46.143734 -52.289635 L46.097637 -52.289635 L46.005444 -52.243538 L45.867153 -52.151345 L45.77496 -52.082199 L45.682766 -51.990006 L45.567524 -51.851715 L45.47533 -51.713425 L45.406185 -51.575135 L45.360088 -51.459893 L45.33704 -51.390748 L45.313991 -51.298554 L45.290943 -51.183312 L45.267895 -51.021973 L45.244846 -50.791489 L45.244846 -50.422714 L45.267895 -50.338213 L45.290943 -50.169182 L45.313991 -49.892601 L45.313991 -48.832374 L44.76083 -45.743887 L44.691684 -45.605597 L44.645588 -45.536452 L44.507297 -45.398161 L44.369007 -45.305968 L44.000232 -45.121581 L43.44707 -44.914145 L43.331828 -44.914145 L42.409892 -44.798903 L42.064166 -44.775854 L41.879779 -44.752806 L41.534053 -44.68366 L41.441859 -44.660612 L41.234423 -44.591467 L41.119181 -44.54537 L40.888697 -44.430128 L40.727358 -44.337934 L40.635165 -44.268789 L40.335535 -43.96916 L40.243342 -43.784773 L40.220293 -43.692579 L40.197245 -43.554288 L40.174196 -43.39295 L40.151148 -43.185514 L40.012857 -42.447965 L39.851519 -41.687368 L39.82847 -41.595174 L39.69018 -41.318593 L39.413599 -41.042012 L39.229212 -40.903722 L39.160066 -40.857625 L38.929583 -40.719334 L40.70431 -38.621929 L41.14223 -39.267285 L41.995021 -40.92677 L42.018069 -40.995915 L42.087214 -41.180302 L42.110263 -41.2264 L43.239635 -42.286626 L43.470119 -42.332723 L43.562313 -42.332723 L44.507297 -41.756513 Z " stroke="#000000" fill="none" stroke-opacity="1" stroke-width="0.12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" />
<path id="flevoland" d="M30.977061 43.924734 L33.189708 43.602057 L34.572612 43.602057 L34.710902 43.579008 L34.919159 43.46293 L35.010114 43.408853 L35.528819 42.907838 L37.545857 40.721005 L37.63805 40.536618 L37.661099 40.467473 L37.684147 40.352231 L37.684147 40.236989 L37.730244 40.07565 L37.753293 40.052602 L37.776341 40.052602 L37.85042 40.215576 L37.916492 39.852181 L37.845486 39.914311 L37.799389 39.93736 L37.776341 39.93736 L37.776341 39.476392 L37.784019 39.461035 L37.868534 37.770809 L37.707195 36.59534 L37.476711 34.981952 L37.407566 34.843661 L36.92355 33.944774 L34.572612 29.726915 L34.180789 29.150705 L32.406062 27.652558 L31.875948 27.214638 L31.161448 26.684525 L30.723528 26.592332 L28.902704 26.523186 L25.652878 24.886749 L25.445443 24.748459 L25.261055 24.610168 L24.777039 24.241394 L23.670715 23.319457 L23.417183 23.065925 L22.633537 21.867408 L22.564391 21.659972 L22.564391 21.627099 L19.614195 21.752165 L19.199324 21.337294 L18.023855 20.046583 L17.977758 19.95439 L17.931661 19.816099 L17.931661 19.539518 L17.95471 19.447325 L18.116049 18.94026 L18.231291 18.594534 L18.323484 18.50234 L18.646162 17.741743 L18.784453 16.819807 L18.254339 14.837643 L17.447645 12.348415 L17.401548 12.256222 L17.263258 12.117931 L11.385914 10.320155 L8.3896204 11.12685 L7.8364586 11.680011 L7.1911034 12.302318 L6.5687966 12.901577 L5.9695376 13.477787 L5.4163758 14.0079 L4.8401656 14.561062 L4.5405367 14.837643 L4.3561494 14.998982 L3.7568904 15.482998 L3.6416486 15.575192 L3.5494547 15.644337 L3.0654386 15.990063 L2.7888573 16.174451 L2.535325 16.33579 L1.5211948 16.912 L1.1985171 17.073339 L0.80669417 17.257726 L0.5992585 17.34992 L0.32267783 17.465162 L-0.41487123 17.741743 L-1.9130176 18.271856 L-3.1576318 18.548437 L-3.2728741 18.571485 L-3.4572613 18.594534 L-3.7107936 18.594534 L-3.9182293 18.571485 L-4.1026165 18.525389 L-6.9187432 17.724716 L-7.2141516 18.663679 L-8.1360879 22.628005 L-8.1360879 22.835441 L-8.1130395 22.927635 L-8.0208457 23.112022 L-7.9286523 23.204215 L-5.4163756 25.209427 L-4.7249238 25.624298 L-2.7427607 26.799767 L-2.7197123 26.799767 L-1.1985173 27.652558 L1.0602269 29.173753 L2.2126473 29.980447 L2.8349541 30.418367 L4.2409072 31.409449 L4.863214 31.847368 L5.8773442 32.561869 L6.499651 32.999789 L8.9197338 34.359645 L8.9888793 34.382693 L9.0349761 34.405742 L9.1041211 34.451838 L11.478107 36.480098 L11.570301 36.618389 L11.639446 36.733631 L11.754688 36.964115 L11.800785 37.079357 L11.800785 37.125454 L11.524204 37.701664 L11.408962 37.932148 L10.87313 38.162632 L11.132381 38.162632 L15.35024 40.882344 L15.48853 40.974538 L17.51679 43.002798 L18.853598 44.431799 L20.720519 45.376784 L22.080375 45.745559 L22.58744 45.883849 L23.255844 46.068236 L23.417183 46.114333 L23.555473 46.16043 L23.878151 46.321769 L24.385216 46.713592 L24.316071 46.413962 L24.892281 45.630316 L25.099716 45.422881 L25.168861 45.376784 L25.353249 45.28459 L25.422394 45.261542 L25.514588 45.238494 L30.977061 43.924734 Z M33.513206 66.594054 L33.536255 66.571005 L33.559303 66.571005 L33.74369 66.732344 L33.858933 66.847586 L34.135514 66.294424 L34.296852 65.994795 L34.435143 65.787359 L34.504288 65.695166 L34.642578 65.556875 L35.310982 64.957617 L35.910241 64.727133 L36.463403 64.727133 L37.293146 64.61189 L37.938501 64.33531 L38.09984 64.220067 L39.160066 63.45947 L40.796504 62.237904 L41.326617 61.707791 L41.85673 61.154629 L44.484249 55.830447 L44.530346 55.623011 L44.530346 55.323382 L44.461201 55.185092 L44.369007 55.023753 L44.922168 52.419283 L46.571592 51.433913 L46.350348 51.507661 L45.958526 51.576806 L45.704993 51.576806 L45.589751 51.300225 L44.713912 49.894272 L44.59867 49.77903 L44.529524 49.732933 L44.345137 49.64074 L36.439533 46.990172 L36.181521 46.970293 L25.675926 46.967124 L24.869232 47.128463 L24.800087 47.681625 L21.919036 51.784241 L21.895988 51.80729 L21.665503 51.853387 L21.365874 51.853387 L21.358196 51.922532 L21.342826 52.083871 L21.358196 53.97384 L21.381245 56.263325 L21.411971 59.897281 L21.435019 62.294315 L21.458068 62.455654 L21.481116 62.547848 L21.504165 62.616993 L21.57331 62.755284 L21.642455 62.870525 L25.399346 68.955305 L25.514588 69.116644 L25.606781 69.208838 L25.698975 69.277983 L25.75631 69.306651 L26.427623 69.46702 L27.312363 69.577612 L27.496751 69.577612 L28.2343 69.669806 L28.580026 69.715903 L28.626123 69.738951 L28.67222 69.785048 L28.695268 69.831145 L28.712575 70.01287 L29.548881 70.212654 L29.479735 70.512283 L29.479735 70.673622 L29.548881 70.673622 L29.641074 70.650573 L29.779364 70.604477 L31.13922 70.051315 L32.268592 68.921943 L33.213577 67.953909 L33.236626 67.746474 L33.421013 66.847586 L33.444061 66.778441 L33.513206 66.594054 Z M42.571231 47.256439 L42.29465 47.210343 L41.810633 47.141197 L41.626246 47.118149 L41.487955 47.118149 L41.464907 47.141197 L41.283773 47.246859 L41.371892 47.243705 L42.664753 47.307288 L42.617328 47.279488 L42.571231 47.256439 Z M25.69309 22.109306 L25.077489 21.649658 L24.85773 21.690543 L24.938377 21.752165 L25.69309 22.109306 Z " stroke="#000000" fill="none" stroke-opacity="1" stroke-width="0.12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" />
</g>
</g>
</svg>
</div>
<script type="text/javascript">
//The data (province, datatype, year and value)
var data = [
{"provincie":"flevoland",
"type":"bevolking",
"jaar":2008,
"value":25},
{"provincie":"limburg",
"type":"bevolking",
"jaar":2008,
"value":25}
];
//Set the default selection
var selectedYear = 2008;
var selectedType = "bevolking";
//Make the data hierarchical
var nestedData = d3.nest()
.key(function(d) {return d.type; })
.key(function(d) {return d.jaar; })
.entries(data);
//Get the correct data
var mapdata = nestedData[selectedType][selectedYear];
//Get the SVG
var svg = d3.select("svg");
//Data koppelen aan provincie en mouseover/mouseout toevoegen
svg.selectAll("g.provincies path")
.data(mapdata)
.style("fill", function(d) { return d.value; });
</script>
</body>
</html>