3

d3 を使用して、GeoJSON 世界地図のメルカトル図法をレンダリングしています。

ユーザーがアプリケーションをステップ実行するときに、d3 を使用してスケーリングし、マップを既知の緯度と経度の値に変換できるようにしたいと考えています。

projection.center( https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center ) と組み合わせて、私が望むことを行いtransition().duration()ますが、これにはマップを再描画する必要があるため、繰り返し続けるにはコストがかかるようです。SVG ( https://developer.mozilla.org/en-US/docs/SVG/Attribute/transform )に付属のネイティブ メソッドtranslate()とメソッドを使用したいと思います。scale()

Mike Bostock ( http://bl.ocks.org/mbostock/4699541 ) のようないくつかの役立つ例と、マップを特定の GeoJSON オブジェクトにセンタリングすることに関する次のような有用な質問を見つけました ( Center a map in d3 geoJSON オブジェクトが与えられました)、しかし、私はそれらの周りに頭を包むのに苦労しています.

SVGを使用して、指定された緯度と経度の値に私の投影を集中させるのを手伝ってもらえますtransform="translate(x, y)"か?

よろしくお願いします。

編集 @Lars: まず、ありがとうございます。私はあなたの提案を試みました、そして動きは起こりますが、投影は動きすぎているように見えます. スクリーンショットと投影コードを以下に示します。

var SFMap = {
    initialise: function() {
        var width = "752";
        var height = "420";
        SFMap.projection = d3.geo.mercator()
            .scale(100)
            .translate([width/2, height/2])
            .center([0, 0]);

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

        SFMap.svg = d3.select("#sf__map")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

        SFMap.g = SFMap.svg.append("g");

        d3.json("world-110m.topo.json", SFMap.draw);
    },

    draw: function(error, topology) {
        SFMap.g
            .selectAll("path")
            .data(topojson.feature(topology, topology.objects.countries)
                .features)
            .enter()
            .append("path")
            .attr("d", SFMap.path)
            .attr("class", "feature");
    },

投影の動き （フルサイズを表示）

上記はtranslate、次のコードを使用してロンドン (北緯 51.5171°、西経 0.1062°) に移動した場合に発生します。

var coordinates = SFMap.projection([0.1062, 51.5171]);
SFMap.g.attr("transform", "translate(" + (-coordinates[0]) + "," + (-coordinates[1]) + ")");

また、もう一度値を反転させてみました。

4

1 に答える 1

2

投影の中心が (0,0) であると仮定すると、中心にしたい点の座標を投影関数に与え (ユーザー座標に変換する)、その逆数を に与えるだけで済みtranslateます。何かのようなもの

var coordinates = projection(point);
svg.attr("transform", "translate(" + (-coordinates[0]) + "," + (-coordinates[1]) + ")");

射影も翻訳した場合は、それを考慮する必要があります。

svg.attr("transform", "translate(" + (-coordinates[0]+width/2) +
         "," + (-coordinates[1]+height/2) + ")");
于 2013-05-28T11:01:30.427 に答える