11
これはわかりやすくわかりませんが、私は世界の地図を表示するページをまとめようとしていますTopoJSONファイルをソースとする）を太平洋を中心としたメルカトル図法で表示します。私。ヨーロッパは左側に、アメリカは右側に、オーストラリアは中央にある。このようなビット...d3.jsを使用して太平洋を中心としたメルカトルマップをズームしてパンニングする
私が望むが、私は東か西をパンするとき、私は「マップをスクロールしたい私の心にマップをズームとパンできるようにしたい、この時点から、世界の終わりには来ません（私は意味があることを望みます）。
私が現在取り組んでいるコードは、ここ（または以下のGist（https://gist.github.com/d3noob/4966228）またはブロック（http://bl.ocks.org/d3noob/4966228））です。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font-size:11px;}
path {
stroke: black;
stroke-width: 0.25px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
velocity = .005,
then = Date.now()
height = 475;
var projection = d3.geo.mercator()
.center([0, 0 ])
.scale(1000);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("world-110m.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries).geometries)
.enter()
.append("path")
.attr("d", path)
.style("fill","black")
d3.timer(function() {
var angle = velocity * (Date.now() - then);
projection.rotate([angle,0,0]);
svg.selectAll("path")
.attr("d", path.projection(projection));
});
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")
});
svg.call(zoom)
});
</script>
</body>
</html>
コードは例のアマルガムであり、その結果として、私は自動的に東に西回転可能地図を見ることができ、私はパンとマウスを使用してズームすることができ、しかし、私から、パンニング及びズーミングする際私は内部の "g"要素に影響を及ぼしており、 "svg"要素内のマップには影響していません。
子午線を中心とした地図をパンしたりズームしたりできる良い例がたくさんあります。しかし、私が発見した反子午線のものはありません。
ご協力いただければ幸いです。
素晴らしい解決することができます！それは素晴らしいようです。良い仕事と多くのありがとう。私はそこに複雑なコードがいくつかあることがわかります。私はそれを勉強するのに時間を取らなければならないだろうが、それはまさに私が達成しようとしていたもののように見える。乾杯。 – d3noob
基本的なやり方は、マウスの翻訳を上/下の地図翻訳と左/右の地図回転に分けることです。実際には、[3Dトラックボールの地球儀の回転]（https://gist.github.com/patricksurry/5721459）と少し似ています。 – patricksurry
これは本当にいいですね。投稿していただきありがとうございます。 –