1

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

取得したマップは、私が求めているものとはまったく異なります。ネパールの標準地図がどのように見えるかよりも間違った方法で投影されています。

通常の投影ではなく、このように見えます。

ここで何が間違っていますか？ネパールの調整に適した他の予測はありますか?

4

1 に答える 1