Bro*_*try 3 html javascript svg d3.js topojson
有一个我要导入的topoJSON文件-看起来应该很容易翻转，但我不知道。创建对象或调整JSON之后，应该转换对象吗？我尝试使用一些投影，该投影使物体翻转，但整个地方变形了。
<!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>
您没有使用投影-因此文件中的坐标无需转换即可转换为像素。如果您的数据具有典型的地理坐标，或者纬度和经度均为正值，则高值位于北端（大多数地图的顶部），而低值位于南端（大多数地图的底部）。
在svg坐标中，低值位于顶部，并随着向底部移动而降低-与大多数地理坐标惯例相反。您可以使用geoIdentity作为投影来翻转json的y坐标：
var projection = d3.geoIdentity()
.reflectY(true)
.fitSize([width,height],geojson)
geojson是您的要素集合： topojson.feature(us, us.objects.counties)
然后将其与您的路径一起使用：
var path = d3.geoPath().projection(projection);