1
デフォルトのメルカトル投影スケール値でスケールの動作に特有の問題が発生しました。私の場合は、なんとか私ができる唯一の方法だったので、かなりばかげた値（75000）私のTOPOJsonマップをドット以外のものとしてプロジェクトにするD3デフォルトのメルカトル投影スケールを使用した初期ズーム
私はマップの投影を作成し、ズームとパンを追加したいと思います。私の機能は、デフォルトのズーム値を除いてすべて機能します。ズームするためにスクロールすると、値はマウスホイールに基づいてスケーリングするのではなく、デフォルトの投影スケール値に戻ります。その理由は、マップを表示するためには、私の投影スケール値を本当に高く（75000）する必要があったからです。
ので、ページが読み込まれると、ズームはthisのように、正常に見える...しかし、あなたは1つのマウスホイールクリックまたはアウトパンやズームしようとすると、それは私がコードを制限しようとしたthis
にジャンププロジェクションとズームのロジックだけになります。
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id = "map" style = "float : left; min-width:320px;width :50%;height : 600px;"></div>
<script>
var width = 900,
height = 800;
var projection = d3.geo.mercator()
.center([-73.94, 40.70])
.scale(75000)
.translate([(width/2), (height/2)]);
var svg = d3.select("#map").append("svg")
.attr("viewBox", "0 0 900 800")
.attr("preserveAspectRatio", "xMidYMid meet");
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g")
.attr("transform", "translate(-793.0489643729818,-630.1796382734433)scale(3.01487286910262)");
d3.json("ny.json", function(error, ny) {
g.append("path")
.attr("id", "boroughs")
.datum(topojson.feature(ny, ny.objects.boroughs))
.attr("d", path);
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
});
シェープファイルはここからダウンロードしたhttp://www1.nyc.gov/site/planning/data-maps/open-data/districts-download-metadata.page mapshaper –
をすることができますし、私はそれを変換あなたの問題を再現できるように、 'ny.json'ファイルをどこかに投稿してください。私は[jsonblob]（https://jsonblob.com/）を使用するのが好きです... – Mark
@マークああ！私はjsonエディタをオンラインで使用しようとしていましたが、それは大きすぎるようでした。ここに行きます：https://jsonblob.com/96ada11e-3285-11e7-ae4c-4b5e1959573f –