二维数组未转换为 D3 地图坐标答案

【问题标题】：2D Array Not Translating to D3 Map Coordinates二维数组未转换为 D3 地图坐标
【发布时间】：2017-07-24 09:12:57
【问题描述】：

D3.js 不接受我创建的二维数组作为坐标（我使用的地图示例位于http://bl.ocks.org/phil-pedruco/6522279。）

以下是事实：

1.) 我提供的 JSON 输入是一串纬度和经度（例如"37.3879 -134.96376"）。

2.) 所需的输出是一个二维数组，必须采用这种形式[[lat,long],[lat,long],...]。

3.) console.log(typeof(lat)); 返回 lat 和 long 值确实是数字（不是字符串）

4.) console.log("Coordinates: " + JSON.stringify(points)); 返回 [[37.3879,-134.96376],[13.5,-45],...] - 看起来格式正确，但地图上没有显示任何点

5.) 如果我对数组中的值进行硬编码，则会显示点。

var points = [];
//var dotSpot = [[1.4440, 32.442], [12.222, 4.893]];

window.onload = function () {
    getJSON();
} 

function getJSON(supplierID) {
    //retrieves JSON perfectly
    //calls make() with Supplier data
}

function make(jdata) {

    for (var i = 0; i < jdata.length; i++) {
        //Splits string by space
        var temp = jdata[i].latLong.split(/[ ,]+/)
        //Converts lat and long strings to floats
        var lat = parseFloat(temp[0]);
        var long = parseFloat(temp[1]);
        console.log(typeof(lat)); 

        //Add "curr" coordinates array to "points" array
        var curr = new Array(lat, long);
        points.push(curr);

    }

    console.log("Coordinates: " + JSON.stringify(points)); 
}

【问题讨论】：

标签： javascript arrays d3.js multidimensional-array

【解决方案1】：

您已将坐标指定为[latitude, longitude]。但是，与许多其他应用程序不同，D3 使用以经度作为第一个值，然后是纬度的坐标。来自docs：

该点必须指定为一个二元素数组 [longitude, latitude] 以度为单位。

相应地更改您的数据应该会产生所需的渲染：

var curr = new Array(long, lat);   // instead of new Array(lat, long)
points.push(curr);

【讨论】：