javascript - 从 JSON 数组显示 D3 中的坐标

Question

我从 php 得到一个 json 响应坐标，如下所示

{"All":[{"longitude":"36.8948669","name":" Manyanja Rd, Nairobi, Kenya","latitude":"-1.2890965","userID":"1"}, ...]}

我之后通过 javascript 加载它如下:

$.ajax({
url : "http://xxx.xxx.xxx/GetLocations.php",
dataType : "json",
data :"",

success : 
function (data){
//populate map is the function that I pass the coordinates to d3 to be shown 
 //when i console.log(data), its showing me the json so I am sure the data is there

populate_map(data)
}
});

这就是函数 populate_map。

function populate_map(pos_data){
    console.log(pos_data.All[0]);
    var width = 700;
var height = 580;

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

var g = svg.append( "g" );

var albersProjection = d3.geo.albers()
    .scale( 190000 )
    .rotate( [71.057,0] )
    .center( [0, 42.313] )
    .translate( [width/2,height/2] );

var geoPath = d3.geo.path()
    .projection( albersProjection );




var projection = d3.geo.mercator()
.center([36.8, -1.3])
.scale([60000])
.translate([width/2, height/2]);

var nairobipathing = d3.geo.path().projection(projection);

g.selectAll( "path" )
    .data( data.geometries )
    .enter()
    .append( "path" )
    .attr( "fill", "#ccc" )
    .attr( "stroke", "#333")
    .attr( "d", nairobipathing );



      svg.selectAll("circles.points")
        .data(pos_data)
        .enter()
        .append("circle")
        .attr("r",5)
        .attr("transform", function(d) {return "translate("  d.All.longitude+","+d.All.latitude ")";});
}

问题是它没有在我初始化的内罗毕 map 上显示任何坐标，但是当我在填充函数中控制台记录数据时，它显示了数据 json。

最后一个 svg 是我用来用这些坐标填充 map 的 svg，但它不起作用，也没有在 map 中显示任何坐标。

请帮我指出问题出在哪里

Answer 1

首先，您似乎使用了两个投影，如果您删除对以大西洋北美海岸为中心的阿尔伯斯投影的引用，情况会更清楚。

其次，您应该传递所呈现的数据对象中的点数组，而不是数据对象本身。

第三，转换中使用的值需要在 svg 坐标空间而不是地理坐标空间中。在您的示例中，您使用的是 d.All.longitude 或 d.All.latitude 而不应用投影。您需要使用 projection([longitude,latitude]) 来获取圆的 svg 坐标。这将返回 svg 坐标空间中的坐标 [x,y](如果需要，您可以分别提取 x 和 y 坐标。

根据第二点和第三点，您的点可以附加如下内容:

     svg.selectAll(".points")
            .data(pos_data.All)
            .enter()
            .append("circle")
            .attr("class","points")
            .attr("r", 5 )
            .attr("stroke","orange")
            .attr("transform", function(d) {return "translate(" + projection([d.longitude,d.latitude]) + ")";})

或者，您可以使用 .attr("cx",x) 或 .attr("cy",y) 作为点中心而不是平移:

         svg.selectAll(".points")
            .data(test.All)
            .enter()
            .append("circle")
            .attr("class","points")
            .attr("r", 5 )
            .attr("stroke","orange")
            .attr("cx", function(d) { return projection([d.longitude,d.latitude])[0]; })
            .attr("cy", function(d) { return projection([d.longitude,d.latitude])[1]; })