projection（[lat，lng]）始终返回null [英] projection([lat,lng]) keeps returning null

问题描述

我试图使用albersUsa投影将几个点从GeoJSON文件映射到地图上。我的代码如下，但它未能添加 cx 和 cy 属性到 circle 元素：

I'm trying to map several points from a GeoJSON file onto a map using the albersUsa projection. My code is as follows, but it fails to add the cx and cy attributes to the circle elements:

var width = 960, height = 500;

// set projection
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);

// create path variable
var path = d3.geo.path().projection(projection);

d3.json("us.json", function(error, topo) {

states = topojson.feature(topo, topo.objects.states).features

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

// add states from topojson
svg.append("g").attr("class", "feature").selectAll("path")
    .data(states).enter()
    .append("path")
    .attr("class", "feature")
    .attr("d", path);

// put border around states 
svg.append("g").attr("class", "mesh").append("path")
    .datum(topojson.mesh(topo, topo.objects.states, function(a, b) { return a !== b; }))
    .attr("class", "mesh")
    .attr("d", path);

d3.json("data/bhutan.json", function(error, bhutan) {

    // add circles to svg
    svg.selectAll("circle")
    .data(bhutan.features)
    .enter()
        .append("circle")
        .attr("class", "bhutan")
        .attr("cx", function(d) {
            var longitude = d.geometry.coordinates[0];
            var latitude = d.geometry.coordinates[1];
            return projection(latitude);
        })
        .attr("cy", function(d) { 
            var longitude = d.geometry.coordinates[0];
            var latitude = d.geometry.coordinates[1];
            return projection(longitude);
        })
        .attr("r", "8px");
});

和我的JSON：

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [39.13, -84.48845]
        },
        "properties": {
            "state": "Ohio",
            "city": "2816 Cincinnati",
            "arrivals": "1"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [32.44874, -99.73314]
        },
        "properties": {
            "state": "Texas",
            "city": "Abilene",
            "arrivals": "178"
        }
    }, {
        …
    }]
}

任何人都可以帮我找出我做错了什么？

Can anyone help me figure out what I'm doing wrong?

推荐答案

你调用投影不正确 - 需要给一对坐标：

You're calling the projection incorrectly -- it needs to be given a pair of coordinates:

.attr("cx", function(d) {
        var longitude = d.geometry.coordinates[1];
        var latitude = d.geometry.coordinates[0];
        return projection([longitude, latitude])[0];
    })
    .attr("cy", function(d) { 
        var longitude = d.geometry.coordinates[1];
        var latitude = d.geometry.coordinates[0];
        return projection([longitude, latitude])[1];
    })

这篇关于projection（[lat，lng]）始终返回null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！