首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >给定geoJSON对象,使地图在d3中居中

给定geoJSON对象,使地图在d3中居中
EN

Stack Overflow用户
提问于 2013-01-24 09:11:10
回答 7查看 66K关注 0票数 144

目前,在d3中,如果你有一个要绘制的geoJSON对象,你必须缩放它并对其进行平移,以使其达到所需的大小,并对其进行平移以使其居中。这是一个非常乏味的试错任务,我想知道是否有人知道更好的方法来获得这些值?

举个例子,如果我有这个代码

代码语言:javascript
复制
var path, vis, xy;
xy = d3.geo.mercator().scale(8500).translate([0, -1200]);

path = d3.geo.path().projection(xy);

vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600);

d3.json("../../data/ireland2.geojson", function(json) {
  return vis.append("svg:g")
    .attr("class", "tracts")
    .selectAll("path")
    .data(json.features).enter()
    .append("svg:path")
    .attr("d", path)
    .attr("fill", "#85C3C0")
    .attr("stroke", "#222");
});

我怎么才能不一点点地获得.scale(8500)和.translate(0,-1200)呢?

EN

回答 7

Stack Overflow用户

发布于 2016-12-03 04:02:39

使用d3 v4或v5会变得更容易!

代码语言:javascript
复制
var projection = d3.geoMercator().fitSize([width, height], geojson);
var path = d3.geoPath().projection(projection);

最后

代码语言:javascript
复制
g.selectAll('path')
  .data(geojson.features)
  .enter()
  .append('path')
  .attr('d', path)
  .style("fill", "red")
  .style("stroke-width", "1")
  .style("stroke", "black");

祝你愉快,干杯

票数 63
EN

Stack Overflow用户

发布于 2013-01-30 05:31:08

您可以使用一个接受经纬度对的center()方法。

据我所知,translate()只用于移动地图的像素。我不确定如何确定什么是规模。

票数 4
EN

Stack Overflow用户

发布于 2018-04-01 20:07:15

除了Center a map in d3 given a geoJSON object之外,请注意,如果您想在对象的边界周围指定填充,您可能更喜欢fitExtent()而不是fitSize()fitSize()自动将此填充设置为0。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14492284

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档