如何在d3中放大GeoJson地图?

时间:2019-05-20 23:50:38

标签: javascript d3.js svg geojson

因此,我的地图可以正常运行,但输出的确很小(如下所示)。当我尝试将其放大时,它会变大,但总是向右过渡。我使用.scale([value])进行了放大,但这只是放大和缩小地图,因此如果我想使用多张地图,它就不太灵活。如果我的缩放值为3000,则必须将宽度设置为负值,这样地图才能保持在屏幕的中心位置。那么有没有办法通过扩大地图来扩大地图?

如果您需要使用d3.js v5来了解我

enter image description here

height=650-margin.top-margin.bottom,
width=1000-margin.left-margin.right;

var nj_map=d3.json("data/nj_counties.topojson").then(function(data){
    console.log(data)
    return data
});



var svg=d3.select("#charting-area").append("svg").attr("width",width+margin.left+margin.right).attr("height",height+margin.top+margin.bottom);
var g=svg.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");

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

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

Promise.all([nj_map]).then(function(values){
var counties=topojson.feature(values[0],values[0].objects.nj_counties).features
console.log(counties)

g.selectAll(".county")
.data(counties)
.enter()
.append("path")
.attr("class","county")
.attr("d",path)

})

0 个答案:

没有答案