Javascript 使用D3创建世界choropleth地图

我是一个新的D3用户，上周我一直在绞尽脑汁，试图弄明白如何创建一个基本的世界choropleth地图并让它实际运行！我一直在尝试每一个可用的代码和教程，但似乎没有任何工作！我试图展示的数据也包含在我的json中，称为“物种”。最后，我希望有一个基本的choropleth，它显示物种数据，当我在上面悬停时，它只提供国家名称和值。非常感谢您的任何建议或指导

当前使用的代码（编辑以符合我的信息）（原件可在中找到）

我的json示例

    {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":      "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "OBJECTID": 3, "FIPS_CNTRY": "AA",     "ISO_3DIGIT": "ABW", "NAME": "Aruba", "LONG_NAME": "Aruba", "Shape_Leng":    0.698924, "Shape_Area": 0.015129, "Number_of_": 26.000000, "Species": "26" },    "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -69.991201758254533, 12.564936161074968 ], [ -69.987234354082148, 12.559555769083488 ], [ -69.983659267461235, 12.557785153262216 ], [ -69.977896332649607, 12.558793663796507 ], [ -69.979292630850239, 12.557989954972413 ], [ -69.978672147201848, 12.556384921426968 ], [ -69.97182917607563, 12.552132010383957 ], [ -69.971315503107974, 12.549742102516007 ], [ -69.969411254325905, 12.550420641899109 ], [ -69.963384270467714, 12.546648621736495 ], [ -69.962705135733415, 12.546379327843681 ], [ -69.960937500265402, 12.54659593135716 ], [ -69.958110928376641, 12.546536564410928 ], [ -69.957436323527475, 12.545586347931589 ], [ -69.956397414109347, 12.543688773917779 ], [ -69.955672860014488, 12.537055253996755 ], [ -69.94667124708036, 12.540498614219644 ], [ -69.944165825792197, 12.536637425376853 ], [ -69.940813541711577, 12.53483021254425 ], [ -69.933964252848, 12.527834058095266 ], [ -69.928611516808019, 12.525171756371435 ], [ -69.928868055616249, 12.521762966987296 ], [ -69.926651835613711, 12.517770409676643 ], [ -69.926916956652235, 12.515210151327381 ], [ -69.924417734390943, 12.515246749238088 ], [ -69.924206257013111, 12.513279556906014 ], [ -69.918271422188354, 12.508972763881957 ], [ -69.917961121008943, 12.506630659477366 ], [ -69.909244775725824, 12.502312660001223 ], [ -69.898086666766233, 12.489711761488593 ], [ -69.895915150263988, 12.485523343527461 ], [ -69.890029430114112, 12.485061645078815 ], [ -69.887601852343607, 12.482514620253482 ], [ -69.886337637571899, 12.480468749832937 ], [ -69.886398077409353, 12.480468749832937 ], [ -69.884469747480864, 12.478347062966577 ], [ -69.883330345119305, 12.475240111242101 ], [ -69.881198167661296, 12.463264107552504 ], [ -69.87345480879236, 12.447664141786674 ], [ -69.873569250220726, 12.43877196285581 ], [ -69.871752858007994, 12.436580657671186 ], [ -69.868788957844117, 12.423137068321012 ], [ -69.865280151257934, 12.41843080543731 ], [ -69.866732954762028, 12.415024757186757 ], [ -69.870972514469941, 12.414948224880675 ], [ -69.873276234010973, 12.412573218779016 ], [ -69.88098335289942, 12.41400110746514 ], [ -69.88356542610353, 12.413048505983738 ], [ -69.884616732676079, 12.414072513635574 ], [ -69.884146571607005, 12.417217254872412 ], [ -69.887623310167612, 12.420512437399054 ], [ -69.890819430572265, 12.421990751971634 ], [ -69.895043253943015, 12.42066562162114 ], [ -69.904002309159239, 12.426742315505464 ], [ -69.905593753049232, 12.426611900318903 ], [ -69.908368229909854, 12.430709243037143 ], [ -69.911455273342199, 12.430269956593236 ], [ -69.912853240684512, 12.431570410446056 ], [ -69.91991043122141, 12.431113004461565 ], [ -69.92511200921183, 12.433772921183333 ], [ -69.9261195655655, 12.432376146342051 ], [ -69.927280545360873, 12.432524561459331 ], [ -69.927960872596202, 12.433737158742872 ], [ -69.927171945928535, 12.435858845609232 ], [ -69.924864053533213, 12.436950207086397 ], [ -69.925641417617328, 12.439117670344217 ], [ -69.932209610784923, 12.441419124492995 ], [ -69.931949854202401, 12.440304756559271 ], [ -69.932809710399795, 12.440086125973949 ], [ -69.940516829288242, 12.441873311803874 ], [ -69.941695213663195, 12.444035648926047 ], [ -69.944575071282486, 12.443960070800586 ], [ -69.949141621788385, 12.447995424149497 ], [ -69.953771352366005, 12.450386046978451 ], [ -69.957332611011168, 12.454207063105457 ], [ -69.960015535088871, 12.455209255003126 ], [ -69.960937500265402, 12.457031249992156 ], [ -69.965335846072435, 12.46140086695641 ], [ -69.968737721468642, 12.463189721028812 ], [ -69.970178961489864, 12.465870976864096 ], [ -69.971952557664395, 12.465869546042711 ], [ -69.975418925243218, 12.468608975423876 ], [ -69.974787950103803, 12.474527478560276 ], [ -69.975870370521193, 12.473966240449613 ], [ -69.976553559399235, 12.469965219619155 ], [ -69.977643847085858, 12.469150305242351 ], [ -69.978891372239048, 12.470363021236437 ], [ -69.977841854418045, 12.47226095228109 ], [ -69.990635752837704, 12.478773474716093 ], [ -69.989674448616881, 12.47935545479038 ], [ -69.990520358128038, 12.480256677103966 ], [ -69.99439775904932, 12.481073141012644 ], [ -69.995885371712518, 12.478585839265065 ], [ -69.998836756011485, 12.480469346083453 ], [ -70.000186443249731, 12.480844259055289 ], [ -70.000915646839644, 12.484424948452613 ], [ -70.010489702537711, 12.488595008552807 ], [ -70.012077451113441, 12.49105381977796 ], [ -70.009847760165997, 12.490551233652525 ], [ -70.009806275339315, 12.492042660340474 ], [ -70.017953276922185, 12.499185323343966 ], [ -70.020050763931579, 12.499186754165351 ], [ -70.020542144504361, 12.499400615645868 ], [ -70.028274059500234, 12.503120660390152 ], [ -70.029504418394197, 12.50432467454408 ], [ -70.030076026587324, 12.50544083122935 ], [ -70.030136943065486, 12.509627223017901 ], [ -70.033386826740639, 12.514538526831529 ], [ -70.036986828179579, 12.514753103273108 ], [ -70.042536974401855, 12.518800258425188 ], [ -70.043136954406918, 12.520274519753286 ], [ -70.046085357453251, 12.521554708283134 ], [ -70.050869106823825, 12.525797605375146 ], [ -70.053049444776036, 12.530033350158988 ], [ -70.056365132744645, 12.530872344782892 ], [ -70.058509111106559, 12.536482572912405 ], [ -70.063081979349874, 12.539495944782004 ], [ -70.062934040873301, 12.541902780588828 ], [ -70.062373756943316, 12.543691158020522 ], [ -70.055176973638424, 12.554270028938674 ], [ -70.055221438818307, 12.560495853800603 ], [ -70.047874331135461, 12.568862318741026 ], [ -70.045472264433442, 12.575522660942056 ], [ -70.04475784300007, 12.580821037460908 ], [ -70.04475784300007, 12.581284642472269 ], [ -70.046714544740439, 12.588581204658851 ], [ -70.050084113790831, 12.595303773650244 ], [ -70.053751349445236, 12.610625743683102 ], [ -70.058658242084221, 12.616226554112188 ], [ -70.057161450040894, 12.622090339797353 ], [ -70.052592754651869, 12.623774051431326 ], [ -70.051294803612279, 12.623705506004285 ], [ -70.049635767576603, 12.621721744562819 ], [ -70.046384453979329, 12.620525240647339 ], [ -70.041723132016898, 12.613908410344834 ], [ -70.033449649781517, 12.609635948939854 ], [ -70.03106045687457, 12.606407165158544 ], [ -70.023722171540953, 12.603497504905931 ], [ -70.017495036366824, 12.595313549280888 ], [ -70.013124227800859, 12.586606860018549 ], [ -69.99986994304345, 12.572924852300105 ], [ -69.993902921482629, 12.568243979975705 ], [ -69.991201758254533, 12.564936161074968 ] ] ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 4, "FIPS_CNTRY": "AC", "ISO_3DIGIT": "ATG", "NAME": "Antigua and Barbuda", "LONG_NAME": "Antigua and Barbuda", "Shape_Leng": 2.893306, "Shape_Area": 0.037020, "Number_of_": 32.000000, "Species": "32" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -62.34320020652433, 16.932690858

如果有用的话，这里有一段我的简历：

OBJECTID,ISO_3DIGIT,NAME,LONG_NAME,Species
3,ABW,Aruba,Aruba,26
4,ATG,Antigua and Barbuda,Antigua and Barbuda,32
5,ARE,United Arab Emirates,United Arab Emirates,37
6,AFG,Afghanistan,Islamic Republic of Afghanistan,33
7,DZA,Algeria,People's Democratic Republic of Algeria,68
8,AZE,Azerbaijan,Republic of Azerbaijan,38
9,ALB,Albania,Republic of Albania,57
10,ARM,Armenia,Republic of Armenia,27

任何关于我做错了什么的建议都将不胜感激。我觉得在这个哈哈的结尾我不会留任何头发。

首先，你需要

geojson

或

topojson

来构建你的地图。看起来地图数据在geojson中，但您正在尝试使用topojson构造构建它

第二，您没有为地图提供投影以控制其形状

第三，您的色阶似乎与您的数据不匹配。数值以10为单位，而刻度仅以百分之一为单位

应用这些修复程序开始制作地图

---

注意，我必须找到自己的GEOJson，这样它可能与您的格式不完全匹配。

到目前为止您有什么？控制台中有错误吗？地图显示时是没有颜色，还是根本没有显示？如果您console.log“world”和“species”会发生什么？你提供的信息越多越好。@GerardoFurtado到目前为止什么都没有！当我输入“world”时，我得到了一个错误，上面说“undefined不是一个对象（评估'world.objects.countries'）”，当我输入“world”时，我得到了=$1，然后得到了“species”=$2，但是a

console.log（world）

作为“ready”函数的第一行，与species相同，并告诉我结果。同样的错误…：（

TypeError:undefined不是对象（评估'world.objects.countries'）

[像这样吗？

OBJECTID,ISO_3DIGIT,NAME,LONG_NAME,Species
3,ABW,Aruba,Aruba,26
4,ATG,Antigua and Barbuda,Antigua and Barbuda,32
5,ARE,United Arab Emirates,United Arab Emirates,37
6,AFG,Afghanistan,Islamic Republic of Afghanistan,33
7,DZA,Algeria,People's Democratic Republic of Algeria,68
8,AZE,Azerbaijan,Republic of Azerbaijan,38
9,ALB,Albania,Republic of Albania,57
10,ARM,Armenia,Republic of Armenia,27