在d3.js中绘制已投影的geoJSON地图 [英] Drawing already projected geoJSON map in d3.js

问题描述

有了v3的d3.js我有问题，使用geoJSON数据绘制地图。代码和生成的地图显示在： http://bl.ocks.org/73833ec90a8a77b0e29f 。使用v2的d3.js本示例生成正确的地图。

With the v3 of d3.js I am having problems drawing a map using geoJSON data. The code and the resulting map is shown at: http://bl.ocks.org/73833ec90a8a77b0e29f. Using v2 of d3.js this example generates a correct map.

1. 我的数据已投影（它们是荷兰国家网格/ Rijksdriehoekstelsel坐标）。为了补偿这一点，我写了我自己的投影函数，只是将地图的坐标系统转换为像素（例如缩放和平移）。


2. d3.js v3中的d3.geo.path（）重新抽样数据。然而，在重采样中生成的点似乎不在与我的地图相同的坐标系（我假设他们是lon，纬度坐标）。

我不想将地图的坐标转换为lon，纬度坐标，因为地图已经投影喜欢，就我所知，这不是一个琐碎的投影。

I would prefer not to translate the coordinates of my map to lon,lat coordinates, since the map is already projected the way I would like, and as far as I can tell this is not a trivial projection.

如果问题确实是由重新取样造成的，我想停用重新取样。但是，在文档中，我真的不能找到如何做到这一点。我不能传递一个投影函数到d3.geo.path.projection（），我可以传递一个流对象。我认为以下将工作：

If the problems are indeed caused by the resampling, I would like to disable the resampling. However, in the documentation I could not really find how to do this. Instead of passing a projection function to d3.geo.path.projection(), I could pass an streaming object. I thought the following would work:

var projection = d3.geo.projection(function(x, y) {
    return [ scale*(x-xmin), height-scale*(y-ymin) ];
  }).precision(0);

但不是。也许也与事实，我没有lat，lon坐标。如何使用自定义投影函数禁用重新采样？

but it doesn't. Probably also to do with the fact that I don't have lat,lon coordinates. How can I disable the resampling using a custom projection function?

或者当其他原因导致问题时，我想听到。

Or when something else is causing the problems, I would like to hear that to.

感谢。

推荐答案

为了回应user603124回答，看看这个问题（到现在为止我坚持v2的d3.js）。我原创的想法创建一个对象工程。然而，在我原来的实现我有缩放和缩放错误。使用回答另一个问题来获取缩放比例和向右缩放：

In response to user603124 answer I had another look at the problem (up until now I sticked with v2 of d3.js). My original idea of creating an object works. However, in my original implementation I had the scaling and zooming wrong. Using the answer to another question to get the scaling and zooming right:

<script>
  var height = 400;
  var width  = 400;

  var vis = d3.select("#vis").append("svg")
      .attr("width", width).attr("height", height)

  d3.json("po_2012_simplified.json", function(json) {

      var projection = d3.geo.projection(function(x, y) { return [x, y];})
        .precision(0).scale(1).translate([0, 0]);

      var path = d3.geo.path().projection(projection);

      var bounds = path.bounds(json),
          scale  = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width, 
                  (bounds[1][1] - bounds[0][1]) / height),
          transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2, 
                  (height - scale * (bounds[1][1] + bounds[0][1])) / 2];

      projection.scale(scale).translate(transl);

      vis.selectAll("path").data(json.features).enter().append("path")
        .attr("d", path)
        .style("fill", "#D0D0D0")
        .style("stroke-width", "0.5px")
        .style("stroke", "black")
    });

</script>

查看 http://bl.ocks.org/djvanderlaan/5336035 获取完整的工作解决方案。

See http://bl.ocks.org/djvanderlaan/5336035 for a complete working solution.

这篇关于在d3.js中绘制已投影的geoJSON地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！