投影([lat，lng]）一直返回null

projection([lat,lng]) keeps returning null

本文关键字：一直 返回 null lng lat 投影      更新时间：2023-09-26

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

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"
        }
    }, {
        …
    }]
}

有人能帮我弄清楚我做错了什么吗？

您错误地调用了投影——需要给它一对坐标：

.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];
    })
相关文章：