Question

我正在尝试使用topojson文件在d3.js中创建尼泊尔的交互式地图。我已经能够使用d3.geo.albers（）投影。我在下面给出的代码。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.feature {
  fill: #ccc;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geo.albers()
    .center([86, 28])
    .rotate([4.4, 0])
    .parallels([27, 32]);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("data/nepal3.json", function(error, npl) {
    var districts = topojson.feature(npl, npl.objects.nepal_districts);

    projection
      .scale(1)
      .translate([0, 0]);

    var b = path.bounds(districts),
      s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][2]) / height),
      t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][3] + b[0][4])) / 2];

    projection
      .scale(s)
      .translate(t);

    svg.append("path")
      .datum(districts)
      .attr("class", "feature")
      .attr("d", path);   
});

我得到的地图并不是我想要的。它的投影方式与尼泊尔标准地图的看法不同。

看起来像this，而不是通常的projection。

我在这里做错了什么？还有其他更适合尼泊尔协调的预测吗？

Answer 1

看起来你已经将投影向错误的方向旋转，即从另一侧通过地球看尼泊尔。如果将它旋转180度，它应该可以正常工作，即

.rotate([184.4,0])

如何使用Albers投影正确地映射d3.js中的尼泊尔？

1 个答案: