Question

我正在尝试使用albersUsa投影将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"
        }
    }, {
        …
    }]
}

任何人都可以帮我弄清楚我做错了吗？

Answer 1

你正在调用投影错误 - 需要给它一对坐标：

.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

1 个答案: