javascript - 从 geojson 文件创建的 map 仅使用路径填充的颜色填充整个 Canvas

Question

我正在尝试使用 javascript D3 创建一张按县划分的弗吉尼亚州 map 。我这里有 geojson 文件(目前只有大约一半的县):

{"type":"FeatureCollection","properties":{"kind":"state","state":"VA"},"features":[

{"type":"Feature","properties":{"kind":"county","name":"Accomack","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-75.3977,38.0135],
[-75.2443,38.0299],[-75.3593,37.8656],[-75.4360,37.8711],[-75.5127,37.7999],
[-75.6113,37.6082],[-75.5948,37.5699],[-75.6660,37.4658],[-75.8030,37.4603],[-75.7865,37.5315],[-75.9399,37.5480],[-75.8030,37.7616],[-75.8194,37.7944],
[-75.7427,37.8054],[-75.6879,37.8601],[-75.7098,37.8985],[-75.7591,37.9040],
[-75.6715,37.9533],[-75.6222,37.9916]]],[[[-76.0166,37.9533],[-75.9946,37.9533],
[-76.0330,37.9149],[-76.0439,37.9533]]],[[[-75.9727,37.8382],[-76.0001,37.8108],[-76.0001,37.8492]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Albemarle","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.3716,38.1833],
[-78.2073,38.1340],[-78.3059,38.0080],[-78.4921,37.7944],[-78.4976,37.7616],[-78.6455,37.7342],[-78.6838,37.7342],[-78.6674,37.7616],[-78.8372,38.0464],
[-78.7769,38.0847],[-78.7495,38.2052],[-78.6619,38.2764]]],[[[-78.4647,38.0683],[-78.5086,38.0573],[-78.5195,38.0080],[-78.4538,38.0245]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Alexandria","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.0846,38.8460],
[-77.0462,38.8405],[-77.0407,38.7912],[-77.0407,38.7857],[-77.1393,38.8022],[-77.1119,38.8460]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Alleghany","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.9983,37.9587],
[-79.9326,37.9533],[-79.8887,37.8930],[-79.7518,37.8875],[-79.6916,37.8437],[-79.6532,37.8711],[-79.6149,37.8547],[-79.6751,37.7616],[-79.7902,37.7944],
[-79.8175,37.7999],[-80.0202,37.6465],[-80.1462,37.5972],[-80.2228,37.6301],[-80.2940,37.6904],[-80.1626,37.8766],[-80.0585,37.9533]]],[[[-79.8340,37.8273],
[-79.8395,37.8054],[-79.8011,37.8163]]],[[[-79.9983,37.8054],[-79.9928,37.7506],[-79.9654,37.7999]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Amelia","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.9883,37.4877],[-77.9006,37.4768],
[-77.8568,37.4165],[-77.8787,37.3672],[-77.7966,37.3344],[-77.8075,37.3070],[-77.7637,37.2741],[-77.7089,37.3015],[-77.6487,37.2632],[-77.6870,37.2193],[-77.7966,37.1920],
[-78.2292,37.2960],[-78.2347,37.3672],[-78.1854,37.4439],[-78.1307,37.4548],[-78.0978,37.4384]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Amherst","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.4396,37.6192],[-79.3465,37.6630],
[-79.2644,37.7944],[-79.1713,37.8054],[-79.0727,37.7835],[-79.0672,37.7177],[-78.9851,37.6958],[-78.8974,37.5425],[-78.8700,37.5425],[-79.0179,37.4275],[-79.0836,37.3946],
[-79.1877,37.4658],[-79.2206,37.5041],[-79.3411,37.5206],[-79.3794,37.5918]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Appomattox","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.8262,37.5534],[-78.6345,37.4165],
[-78.6291,37.3836],[-78.5962,37.4001],[-78.5962,37.3453],[-78.6838,37.2467],[-78.6893,37.2467],[-78.8262,37.2029],[-78.9193,37.2467],[-79.0015,37.4001],[-79.0179,37.4275],
[-78.8700,37.5425]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Arlington","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.1174,38.9336],[-77.0407,38.8734],
[-77.0462,38.8405],[-77.0846,38.8460],[-77.1119,38.8460],[-77.1503,38.8789],[-77.1722,38.8953]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Augusta","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.3137,38.4133],[-79.2260,38.4790],
[-78.7495,38.2052],[-78.7769,38.0847],[-78.8372,38.0464],[-78.8591,38.0299],[-78.9084,37.9861],[-78.8974,37.9478],[-79.0070,37.8821],[-79.0617,37.9149],[-79.1548,37.8930],
[-79.4835,38.0847],[-79.4396,38.1614],[-79.5327,38.1504],[-79.5108,38.1778],[-79.4068,38.2490]]],[[[-79.0398,38.1942],[-79.0946,38.1833],[-79.1055,38.1395],[-79.0289,38.1340],
[-79.0124,38.1833]]],[[[-78.8646,38.0902],[-78.9303,38.0902],[-78.9467,38.0518],[-78.8700,38.0409]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Bath","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.7956,38.2654],[-79.5108,38.1778],[-79.5327,38.1504],
[-79.4396,38.1614],[-79.4835,38.0847],[-79.6532,37.8711],[-79.6916,37.8437],[-79.7518,37.8875],[-79.8887,37.8930],[-79.9326,37.9533],[-79.9983,37.9587],[-80.0585,37.9533],[-79.9599,38.0628],
[-79.9216,38.1778]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Bedford","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.4396,37.6192],[-79.3794,37.5918],[-79.3411,37.5206],
[-79.2206,37.5041],[-79.1877,37.4658],[-79.1877,37.4658],[-79.2699,37.4494],[-79.2315,37.3946],[-79.2589,37.3563],[-79.4451,37.0550],[-79.4889,37.0605],[-79.4561,37.0167],[-79.4835,37.0057],
[-79.5437,37.0496],[-79.5930,37.0441],[-79.6642,37.1427],[-79.7792,37.2029],[-79.7847,37.2303],[-79.8449,37.2248],[-79.8449,37.3070],[-79.7737,37.3727],[-79.8121,37.4056],[-79.6751,37.4822],
[-79.5820,37.4494],[-79.4999,37.5315],[-79.4342,37.5699],[-79.4561,37.6082]]],[[[-79.5547,37.3398],[-79.5054,37.3179],[-79.4889,37.3453]]],[[[-79.5547,37.3398],[-79.4889,37.3453],
[-79.5054,37.3179]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Bland","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-81.2251,37.2358],[-80.9787,37.2905],[-81.0170,37.2741],
[-80.8965,37.1810],[-80.8691,37.1920],[-80.8527,37.1481],[-80.9294,37.1153],[-80.9129,37.0715],[-81.1156,37.0222],[-81.2251,37.0496],[-81.3785,36.9510],[-81.4387,37.0112],[-81.4606,37.0386],
[-81.2689,37.0934],[-81.2635,37.1262],[-81.3347,37.1481],[-81.2635,37.1755],[-81.2854,37.2139]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Botetourt","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.7902,37.7944],[-79.6751,37.7616],[-79.6861,37.6630],
[-79.4999,37.5315],[-79.5820,37.4494],[-79.6751,37.4822],[-79.8121,37.4056],[-79.7737,37.3727],[-79.8449,37.3070],[-80.0750,37.4220],[-79.9709,37.5425],[-80.0202,37.6465],[-79.8175,37.7999]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Bristol","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-82.1452,36.6716],[-82.1014,36.6443],[-82.1452,36.5950],
[-82.2438,36.5950],[-82.1124,36.6388]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Brunswick","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.0047,37.0222],[-77.9663,36.9893],[-77.8897,36.9893],
[-77.7637,36.9729],[-77.6596,36.8962],[-77.6542,36.7155],[-77.7692,36.5457],[-77.9006,36.5457],[-78.0485,36.5457],[-78.0266,36.7757]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Buchanan","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-81.9700,37.5370],[-81.9262,37.5096],[-81.9974,37.4768],
[-81.9371,37.4384],[-81.9262,37.3617],[-81.8495,37.2851],[-81.7619,37.2741],[-81.7400,37.2412],[-81.7619,37.2029],[-81.8988,37.1427],[-82.0083,37.1208],[-82.0467,37.0441],[-82.1507,37.0441],
[-82.2493,37.2741],[-82.3150,37.2960],[-82.3150,37.2960]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Buckingham","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.4921,37.7944],[-78.4264,37.7396],[-78.2402,37.6904],
[-78.2511,37.6356],[-78.4647,37.3398],[-78.5140,37.3289],[-78.5962,37.4001],[-78.6291,37.3836],[-78.6345,37.4165],[-78.8262,37.5534],[-78.8207,37.6301],[-78.7167,37.6356],[-78.6893,37.6958],
[-78.6400,37.6849],[-78.6455,37.7342],[-78.4976,37.7616]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Buena Vista","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.3794,37.7451],[-79.3301,37.7616],[-79.3684,37.6958]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Campbell","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.0015,37.4001],[-78.9193,37.2467],[-78.8262,37.2029],
[-78.9029,37.0222],[-78.9741,37.0496],[-79.0070,37.0276],[-79.0946,37.0605],[-79.1275,37.0879],[-79.1932,37.0550],[-79.2041,37.1098],[-79.2315,37.0988],[-79.2534,37.1317],[-79.3027,37.1098],
[-79.3411,37.1372],[-79.4451,37.0550],[-79.2589,37.3563],[-79.2151,37.3344],[-79.0836,37.3946],[-79.0179,37.4275]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Caroline","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.3255,38.2435],[-77.2927,38.2216],[-77.2270,38.2435],
[-77.2543,38.1888],[-77.1174,38.1504],[-77.1065,38.1285],[-77.1722,38.0792],[-77.0681,37.9642],[-77.0736,37.9642],[-77.1667,37.9642],[-77.1831,37.8930],[-77.2379,37.9094],[-77.3474,37.7889],
[-77.4022,37.7780],[-77.4460,37.8930],[-77.4844,37.8821],[-77.6432,37.9916],[-77.3694,38.2490]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Carroll","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-80.6336,36.9291],[-80.4638,36.7100],[-80.4912,36.6497],
[-80.5953,36.6607],[-80.6281,36.6059],[-80.6117,36.5566],[-80.8363,36.5566],[-80.8363,36.5566],[-80.9129,36.6497],[-80.8746,36.6936],[-80.9348,36.6716],[-81.0444,36.8086],[-80.7432,36.8798]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Charles City","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.0407,37.4275],[-76.9422,37.4110],[-76.9422,37.3836],
[-76.9038,37.4056],[-76.9038,37.3782],[-76.9148,37.3508],[-76.8710,37.3617],[-76.8819,37.2248],[-76.9750,37.2467],[-77.0079,37.3070],[-77.0681,37.2686],[-77.0900,37.3124],[-77.2708,37.3234],
[-77.2489,37.3836],[-77.2160,37.3836],[-77.1777,37.4932]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Charlotte","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.6893,37.2467],[-78.6838,37.2467],[-78.6838,37.1920],
[-78.4428,37.0769],[-78.4921,36.8907],[-78.6510,36.6990],[-78.6893,36.7428],[-78.6674,36.7648],[-78.6674,36.8524],[-78.7495,36.9236],[-78.7276,36.9400],[-78.7441,37.0057],[-78.7879,36.9510],
[-78.8207,36.9838],[-78.8974,36.9784],[-78.9029,37.0222],[-78.8262,37.2029]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Charlottesville","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.4647,38.0683],[-78.4538,38.0245],[-78.5195,38.0080],
[-78.5086,38.0573]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Chesapeake","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-76.4054,36.8688],[-76.3780,36.7867],[-76.2904,36.7976],
[-76.2904,36.8195],[-76.2247,36.8414],[-76.2028,36.7702],[-76.1425,36.7593],[-76.0658,36.6881],[-76.1206,36.6662],[-76.1206,36.5512],[-76.3123,36.5512],[-76.4930,36.5512],[-76.4602,36.8140],
[-76.4218,36.8688]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Chesterfield","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.6542,37.5644],[-77.5939,37.5534],[-77.5282,37.5315],
[-77.4898,37.4548],[-77.4186,37.4494],[-77.3803,37.3836],[-77.3036,37.4056],[-77.2872,37.3508],[-77.2489,37.3836],[-77.2708,37.3234],[-77.2817,37.3124],[-77.2982,37.3124],[-77.2982,37.3124],
[-77.3365,37.3124],[-77.3748,37.2467],[-77.4022,37.2358],[-77.3694,37.296],[-77.4296,37.2741],[-77.4186,37.2358],[-77.446,37.2248],[-77.6487,37.2632],[-77.7089,37.3015],[-77.7637,37.2741],
[-77.8075,37.307],[-77.7966,37.3344],[-77.8787,37.3672],[-77.8568,37.4165],[-77.8075,37.4275]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Clarke","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.0321,39.2622],[-78.0321,39.2622],[-77.8294,39.1308],
[-77.9609,39.0158],[-78.0047,38.9774],[-78.1526,39.0377]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Clifton Forge","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.8340,37.8273],[-79.8011,37.8163],[-79.8395,37.8054]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Colonial Heights","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.4186,37.2358],[-77.4296,37.2741],[-77.3694,37.2960],
[-77.4022,37.2358]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Covington","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.9983,37.8054],[-79.9654,37.7999],[-79.9928,37.7506]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Craig","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-80.0202,37.6465],[-79.9709,37.5425],[-80.0750,37.4220],
[-80.1736,37.3782],[-80.2612,37.3398],[-80.3269,37.3672],[-80.4310,37.3124],[-80.4748,37.4220],[-80.2995,37.5096],[-80.2831,37.5315],[-80.3324,37.5370],[-80.3269,37.5644],[-80.2228,37.6301],
[-80.1462,37.5972]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Culpeper","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.9335,38.6981],[-77.8897,38.6817],[-77.8623,38.6214],
[-77.8732,38.5831],[-77.7582,38.4297],[-77.6377,38.4078],[-77.6213,38.3695],[-77.7035,38.3585],[-77.7692,38.3914],[-77.7801,38.3640],[-77.8951,38.3914],[-78.0923,38.3093],[-78.1197,38.3695],
[-78.0978,38.4024],[-78.2292,38.5338],[-78.1690,38.5229]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Cumberland","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.1635,37.7506],[-78.1580,37.7506],[-78.0923,37.7068],
[-78.1087,37.6739],[-78.0704,37.6575],[-78.1307,37.4548],[-78.1854,37.4439],[-78.2347,37.3672],[-78.2621,37.3453],[-78.3552,37.3015],[-78.4647,37.3398],[-78.2511,37.6356],[-78.2402,37.6904]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Danville","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.4013,36.6388],[-79.3027,36.5840],[-79.3411,36.5402],
[-79.4725,36.5402],[-79.4561,36.5785],[-79.5163,36.6059],[-79.4287,36.6004]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Dickenson","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-82.3150,37.2960],[-82.2493,37.2741],[-82.1507,37.0441],
[-82.3260,36.9729],[-82.3643,36.9564],[-82.4793,37.0222],[-82.5451,37.1317],[-82.5560,37.2029],[-82.3150,37.2960]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Dinwiddie","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.6487,37.2632],[-77.4460,37.2248],[-77.4570,37.1865],
[-77.3967,37.1700],[-77.3967,36.9948],[-77.6213,36.8798],[-77.6596,36.8962],[-77.7637,36.9729],[-77.8897,36.9893],[-77.9006,37.1427],[-77.7966,37.1920],[-77.6870,37.2193]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Emporia","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.5611,36.6990],[-77.5118,36.7155],[-77.5282,36.6716]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Essex","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.0626,38.1614],[-77.0298,38.0902],
[-77.0024,38.1121],[-76.9367,38.0792],[-76.9093,37.9861],[-76.7778,37.8766],[-76.6847,37.7725],[-76.7505,37.7287],[-76.7998,37.7944],[-76.9422,37.7835],[-76.9476,37.8273],
[-77.0407,37.8711],[-77.0243,37.9094],[-77.0681,37.9642],[-77.1722,38.0792],[-77.1065,38.1285],[-77.1174,38.1504]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Fairfax","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.3310,39.0596],[-77.2434,39.0267],
[-77.2324,38.9774],[-77.1174,38.9336],[-77.1722,38.8953],[-77.1941,38.8843],[-77.1503,38.8789],[-77.1119,38.8460],[-77.1393,38.8022],[-77.0407,38.7857],[-77.0407,38.7200],
[-77.0846,38.7091],[-77.1338,38.6762],[-77.1284,38.6324],[-77.2215,38.6379],[-77.3036,38.7091],[-77.3748,38.7145],[-77.4460,38.8022],[-77.4953,38.7967],[-77.5337,38.8460]]],
[[[-77.3201,38.8679],[-77.3201,38.8350],[-77.2708,38.8405],[-77.2708,38.8624]]],[[[-77.3201,38.8679],[-77.2708,38.8624],[-77.2708,38.8405],[-77.3201,38.8350]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Falls Church","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.1722,38.8953],[-77.1503,38.8789],
[-77.1941,38.8843]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Fauquier","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.9609,39.0158],[-77.6542,38.9446],
[-77.7144,38.8296],[-77.5337,38.5557],[-77.6323,38.4681],[-77.6377,38.4078],[-77.7582,38.4297],[-77.8732,38.5831],[-77.8623,38.6214],[-77.8897,38.6817],[-77.9335,38.6981],
[-78.0047,38.7200],[-78.0266,38.7967],[-78.1307,38.8624],[-78.0595,38.8898],[-78.0759,38.9117],[-78.0047,38.9774]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Floyd","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-80.1297,37.1208],[-80.1024,37.0276],
[-80.2338,36.8743],[-80.3433,36.8305],[-80.3926,36.7428],[-80.4474,36.7428],[-80.4638,36.7100],[-80.6336,36.9291],[-80.5460,36.9838],[-80.5186,37.0112],[-80.4912,36.9838],
[-80.4529,37.0222],[-80.3488,37.0222],[-80.1790,37.1153]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Fluvanna","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.3059,38.0080],[-78.0649,37.9040],
[-78.1580,37.7506],[-78.1635,37.7506],[-78.2402,37.6904],[-78.4264,37.7396],[-78.4921,37.7944]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Franklin","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-79.7847,37.2303],[-79.7792,37.2029],
[-79.6642,37.1427],[-79.5930,37.0441],[-79.6423,36.8579],[-79.6478,36.8524],[-79.7628,36.7867],[-79.9983,36.8305],[-80.0147,36.7812],[-80.0421,36.7921],[-80.0750,36.8469],
[-80.2338,36.8743],[-80.1024,37.0276],[-80.1297,37.1208],[-80.0312,37.1755],[-79.9545,37.1372],[-79.8449,37.2248]]],[[[-76.9257,36.7100],[-76.9093,36.6497],[-76.9695,36.6826]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Frederick","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-78.3497,39.4649],[-78.2292,39.3937],
[-78.0321,39.2622],[-78.0321,39.2622],[-78.1526,39.0377],[-78.3114,39.0103],[-78.3388,39.1034],[-78.3935,39.1034],[-78.4538,39.0267],[-78.5414,39.0541],[-78.5086,39.0870],
[-78.4045,39.1691],[-78.4374,39.1965],[-78.3388,39.3499],[-78.3662,39.3608]]],[[[-78.1635,39.1965],[-78.2019,39.1801],[-78.1854,39.1308],[-78.1361,39.1856]]]]}},

{"type":"Feature","properties":{"kind":"county","name":"Fredericksburg","state":"VA"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.5282,38.3093],[-77.4734,38.3202],
[-77.4460,38.2819],[-77.4898,38.2709]]]]}}

]}

这是我用来创建 map 的 JavaScript 文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>D3 Tutorial</title>
    <script src="http://d3js.org/d3.v3.min.js">  </script>
</head>
<body>
    <script>

    var canvas = d3.select("body").append("svg")
        .attr("width", 760)
        .attr("height", 760);

    d3.json("virginia.geojson", function(data) {
        var group = canvas.selectAll("g")
            .data(data.features)
            .enter()
            .append("g");
        var projection = d3.geo.mercator().scale(7300).translate([0,1980]);
        var path = d3.geo.path().projection(projection);

        var areas = group.append("path")
            .attr("d", path)
            .attr("class", "area")
            .attr("fill", "steelblue");
    }); 

    </script>
</body>
</html>

这是我打开它时得到的结果:

我认为 map 可能太大了，但即使我将 Canvas 的大小加倍，整个东西还是一个蓝色矩形。我不知道如何缩小它。

Answer 1

us-states.json 的某些版本包含弗吉尼亚州的数据损坏。有更新:https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json