将国家/地区ID从json添加到dorling地图

时间:2015-10-28 19:38:28

标签: javascript json d3.js

我正在使用this map我正在尝试从id文件中获取world-110m.json个数字,以显示在候选地图的圆圈中。 json文件的结构如下所示:

{
"type": "Topology",
"transform": {
    "scale": [0.0036000360003600037, 0.0016925586033320111],
    "translate": [ - 180, - 85.60903777459777]
},
"objects": {
    "land": {
        "type": "MultiPolygon",
        "arcs": [[[0]], [[1]], [[2]], [[3]], [[4]], [[5]], [[6]], [[7, 8, 9]], [[10, 11]], [[12]], [[13]], [[14]], [[15]], [[16]], [[17]], [[18]], [[19]], [[20]], [[21]], [[22]], [[23]], [[24]], [[25]], [[26]], [[27]], [[28]], [[29, 30]], [[31]], [[32]], [[33]], [[34]], [[35]], [[36]], [[37]], [[38]], [[39]], [[40]], [[41]], [[42, 43]], [[44]], [[45]], [[46]], [[47, 48, 49, 50]], [[51]], [[52]], [[53]], [[54]], [[55]], [[56]], [[57]], [[58]], [[59]], [[60]], [[61]], [[62, 63]], [[64]], [[65]], [[66]], [[67]], [[68]], [[69]], [[70]], [[71]], [[72]], [[73]], [[74]], [[75]], [[76, 77]], [[78]], [[79]], [[80]], [[81]], [[82]], [[83]], [[84]], [[85]], [[86]], [[87]], [[88]], [[89]], [[90, 91]], [[92]], [[93]], [[94]], [[95]], [[96]], [[97]], [[98]], [[99]], [[100]], [[101]], [[102]], [[103]], [[104]], [[105]], [[106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221]], [[222, 223]], [[224]], [[225]], [[226]], [[227]], [[228]], [[229]], [[230, 231, 232, 233]], [[234]], [[235]], [[236]], [[237]], [[238]], [[239]], [[240]], [[241]], [[242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371, 372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 389, 390, 391, 392, 393, 394, 395, 396, 397, 398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436, 437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449, 450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462, 463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475, 476, 477], [478, 479, 480, 481, 482, 483, 484]], [[485]], [[486]], [[487]], [[488]], [[489]], [[490]], [[491]], [[492]], [[493]], [[494]], [[495]], [[496]], [[497]], [[498]]]
    },
    "countries": {
        "type": "GeometryCollection",
        "geometries": [{
            "type": "Polygon",
            "arcs": [[499, 500, 501, 502, 503, 504]],
            "id": 4
        }, {
            "type": "MultiPolygon",
            "arcs": [[[505, 506, 352, 507]], [[354, 508, 509]]],
            "id": 24
        }, {
            "type": "Polygon",
            "arcs": [[510, 511, 414, 512, 513, 514]],
            "id": 8
        }, {
            "type": "Polygon",
            "arcs": [[312, 515, 314, 516, 517]],
            "id": 784
        }, {
            "type": "MultiPolygon",
            "arcs": [[[518, 11]], [[519, 520, 521, 166, 522, 168, 523, 524]]],
            "id": 32
        }, {
            "type": "Polygon",
            "arcs": [[525, 526, 527, 528, 529]],
            "id": 51
        }, {
            "type": "MultiPolygon",
            "arcs": [[[0]], [[1]], [[2]], [[3]], [[4]], [[5]], [[6]], [[530, 531]]],
            "id": 10
        }, {
            "type": "Polygon",
            "arcs": [[13]],
            "id": 260
        }, {
            "type": "MultiPolygon",
            "arcs": [[[14]], [[24]]],
            "id": 36
        }, {
            "type": "Polygon",
            "arcs": [[532, 533, 534, 535, 536, 537, 538]],
            "id": 40
        }, etc.

我知道我可以像这样访问id

var nbr = "unknown";
    try {
        nbr = land.geometries[parseInt(d.id)-1].parent.id;
    } catch(e) {
        console.log("no nbr found for "+d.id);
    }

然后使用从world-110m.json文件中获取的所有其他变量返回它:

return {
  nbr:nbr,
  x: centroid[0],
  y: centroid[1],
  ox: centroid[0],
  oy: centroid[1],
  geometry: d.geometry,
  dorling: dorling(d.geometry)
};

但是现在我不明白我如何能够访问这个变量并将其绘制到dorling地图的圆圈中(最好是只有当圆圈的大小足够大时才能进入"携带"身份证号码)。我看过this questionthis post有关如何将国家/地区名称添加到d3地图的信息,但我不了解如何使用我正在使用的地图执行此操作。到目前为止,我所尝试的一切都没有用。有人可以帮我这个吗?我添加了html文件,添加了this pen。我很抱歉它没有显示任何内容(我不知道如何将所需的json文件添加到笔中;我只是从地图来源下载它们我正在使用并运行所有内容局部地)。

1 个答案:

答案 0 :(得分:0)

Duh,傻傻的我,我忘了添加一个svg文本元素。以下代码做到了:

svg.selectAll("text")
  .data(nodes).enter()    
  .append("text")
  .attr("x", function (d) { return d.x; })
  .attr("y", function (d) { return d.y; })
  .text(function (d) { return d.nbr; }); 

然而,显示器看起来并不是很好,但这将是另一个问题......

相关问题