由于某种原因，我的D3地图正反面显示-如何翻转它? [英] For some reason, my D3 Map is displaying upside down - how can I flip it?
问题描述
有一个我要导入的topoJSON文件-看起来应该很容易翻转，但是我不知道.在创建对象或调整JSON之后是否应该对其进行转换?我尝试使用一些投影来翻转对象，但整个地方都会扭曲.
Have a topoJSON file that I am importing - seems like this should be easy to flip, but I have no idea. Should I be transforming the object after it's created or adjusting the JSON? I tried using some projections, which flipped the object, but distorted it all over the place.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.counties {
fill: blue;
}
.states {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var path = d3.geoPath()
//first make projection
//var projection = d3.geoMercator();
//var path = d3.geoPath()
// .projection(projection);
d3.json("data.topojson", function(error, us) {
if (error) throw error;
var counties = topojson.feature(us, us.objects.counties),
counties = counties.features.filter(function(d) { return d.properties.AWATER === 0; });
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(counties)
.enter().append("path")
.attr("d", path)
.style("fill", 'blue')
.append('g')
attr('transform', 'rotate(180 0 0)');
});
</script>
推荐答案
您没有使用投影-因此文件中的坐标无需转换即可转换为像素.如果您的数据具有典型的地理坐标或经纬度均为正值，则高值位于北端(大多数地图的顶部)，而低值位于南端(大多数地图的底部).
You aren't using a projection - so the coordinates in the file are translated to pixels with no transformation. If your data has typical geographic coordinates, or lat longs that are both positive, high values are at the north end (the top in most maps), and low values are at the south end (the bottom in most maps).
在svg坐标中，低值位于顶部，并随着一个值向底部移动而增加-与大多数地理坐标约定相反.您可以使用geoIdentity作为投影来翻转JSON的y坐标:
In svg coordinates, low values are located at the top and increase as one moves towards the bottom - the opposite of most geographic coordinate conventions. You could use a geoIdentity as your projection to flip the json's y coordinates:
var projection = d3.geoIdentity()
.reflectY(true)
.fitSize([width,height],geojson)
geojson是您的要素集合:topojson.feature(us, us.objects.counties)
Where geojson is your feature collection: topojson.feature(us, us.objects.counties)
然后将其与您的路径一起使用:
And then use it with your path:
var path = d3.geoPath().projection(projection);
这篇关于由于某种原因，我的D3地图正反面显示-如何翻转它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
