出于某种原因，我的 D3 地图显示颠倒了 - 我该如何翻转它？

Question

有一个我正在导入的 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>

Answer 1

您没有使用投影 - 因此文件中的坐标被转换为没有转换的像素。如果您的数据具有典型的地理坐标或均为正的经纬度，则高值位于北端（大多数地图的顶部），低值位于南端（大多数地图的底部）。

在 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);

出于某种原因，我的 D3 地图显示颠倒了 - 我该如何翻转它？

For some reason, my D3 Map is displaying upside down - how can I flip it?

html

javascript

svg

d3.js

topojson