[英]Center and Rotate Projection in d3 v4
I am trying to make a static, interactive map of Wisconsin counties. 我正在尝试制作威斯康星州的静态,交互式地图。
I am using Albers Equal Area Conic projection and I have tried .rotate
, .center
, .fitExtent
, but whenever I add these into the code, the map completely disappears. 我正在使用Albers
.rotate
圆锥投影,并且尝试了.rotate
, .center
和.fitExtent
,但是每当将它们添加到代码中时,地图就会完全消失。
Anyone know what could be going on? 有人知道会发生什么吗?
Here's the code: 这是代码:
var margin = {top: 20, left: 20, bottom: 20, right: 20}
height = 600- margin.top - margin.bottom,
width = 960 - margin.left - margin.right;
var svg2 = d3.select("#map2").append("svg")
.attr("height", height)
.attr("width", width)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")");
d3.queue()
.defer(d3.json, "WiscCountiesNoProjection.json")
.await(ready);
var projection2 = d3.geoAlbers()
.translate([width/3, height/1])
.scale(4000)
var path2 = d3.geoPath()
.projection(projection2)
function ready (error, data) {
var counties = topojson.feature(data, data.objects.WiscCounties).features
svg2.selectAll(".counties")
.data(counties)
.enter().append("path")
.attr("class", "counties")
.attr("d", path2)
}
And here is what it looks like: 这是它的样子:
You don't go into the details of how you're calling the different methods, but here's a few general tips on how to work with them: 您无需详细介绍如何调用不同的方法,但是这里有一些有关如何使用它们的一般提示:
fitExtent
or the short hand version fitSize
should definitely make your object appear on the SVG if you're not applying any other transformations. 如果您不应用任何其他转换,则
fitExtent
或简写版本fitSize
绝对应该使您的对象出现在SVG上。 A minimum working example would be: 最小的工作示例是:
const proj = d3.geoAlbers()
.fitSize([width, height], wisconsin)
That should result in a nicely fitted, albeit not correctly rotated Wisconsin. 尽管威斯康星州旋转不正确,但是这应该会导致安装得很好。 If it doesn't,
wisconsin
is not a valid GeoJSON object, ie not a FeatureCollection
, single Feature
or geometric object. 如果不是,则
wisconsin
州不是有效的GeoJSON对象,即不是FeatureCollection
,单个Feature
或几何对象。
The next question is how to fix the rotation. 下一个问题是如何解决旋转问题。 For conic projections, as I understand, you generally want to find the center of your object of interest and rotate by the inverse of the longitude.
据我所知,对于圆锥投影,您通常希望找到感兴趣的对象的中心并按经度的倒数旋转。 A very friendly StackOverflow user explained the details here: https://stackoverflow.com/a/41133970/4745643
一个非常友好的StackOverflow用户在此处解释了详细信息: https : //stackoverflow.com/a/41133970/4745643
In the case of Wisconsin the center of the state has a longitude of almost exactly -90°, so we do this: 在威斯康星州的情况下,州中心的经度几乎正好为-90°,所以我们这样做:
const proj = d3.geoAlbers()
.rotate([90, 0, 0])
.fitSize([width, height], wisconsin)
Note that we're rotating the map before we fit the object into our SVG. 请注意,在将对象拟合到SVG中之前,我们先旋转地图。 As a general rule of thumb, you should apply spherical transforms before zooming and fitting your map (I shall follow up with a more detailed explanation in a moment).
作为一般的经验法则,在缩放和拟合地图之前,应先应用球面变换(稍后我将作更详细的解释)。
That should leave you with a nicely rotated and fitted state: 那应该使您处于良好的旋转和适应状态:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.