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地图显示颠倒 - 我该怎么翻？

1 个答案: