blocks|key|174962|text|使用d3+v4或v5会变得更容易！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|174963|var+projection+=+d3.geoMercator().fitSize([width,+height],+geojson);
var+path+=+d3.geoPath().projection(projection);|code-block|syntax|javascript|174964|最后|174965|g.selectAll('path')
++.data(geojson.features)
++.enter()
++.append('path')
++.attr('d',+path)
++.style("fill",+"red")
++.style("stroke-width",+"1")
++.style("stroke",+"black");|174966|祝你愉快，干杯|174967|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

With d3 v4 or v5 its getting way easier!

<pre><code>var projection = d3.geoMercator().fitSize([width, height], geojson);
var path = d3.geoPath().projection(projection);
</code></pre>

and finally

<pre><code>g.selectAll('path')
 .data(geojson.features)
 .enter()
 .append('path')
 .attr('d', path)
 .style("fill", "red")
 .style("stroke-width", "1")
 .style("stroke", "black");
</code></pre>

Enjoy, Cheers

blocks|key|174833|text|您可以使用一个接受经纬度对的center()方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|174834|据我所知，translate()只用于移动地图的像素。我不确定如何确定什么是规模。|174835|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center^0|E|8|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

There is a <a href="https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center" rel="nofollow">center()</a> method you can use that accepts a lat/lon pair.

From what I understand, translate() is only used for literally moving the pixels of the map. I am not sure how to determine what scale is.

blocks|key|392981|text|除了Center+a+map+in+d3+given+a+geoJSON+object之外，请注意，如果您想在对象的边界周围指定填充，您可能更喜欢fitExtent()而不是fitSize()。fitSize()自动将此填充设置为0。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|392982|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object/40940028#40940028^0|21|B|2F|9|2P|9|2|15|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

In addition to <a href="https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object/40940028#40940028">Center a map in d3 given a geoJSON object</a>, note that you may prefer <code>fitExtent()</code> over <code>fitSize()</code> if you want to specify a padding around the bounds of your object. <code>fitSize()</code> automatically sets this padding to 0.

blocks|key|392843|text|我在互联网上四处寻找一种轻松地将地图居中的方法，并从Jan+van+der+Laan和mbostock的答案中获得了灵感。如果您正在使用jQuery的容器，这里有一种更简单的方法。我为填充/边框等创建了95%25的边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|392844|var+width+=+$("#container").width()+*+0.95,
++++height+=+$("#container").width()+*+0.95+/+1.9+//using+height()+doesn't+work+since+there's+nothing+inside

var+projection+=+d3.geo.mercator().translate([width+/+2,+height+/+2]).scale(width);
var+path+=+d3.geo.path().projection(projection);

var+svg+=+d3.select("#container").append("svg").attr("width",+width).attr("height",+height);|code-block|syntax|javascript|392845|如果你在寻找精确的缩放，这个答案对你不起作用。但是如果像我一样，您希望显示一个集中在容器中的地图，这应该就足够了。我试图显示墨卡托地图，发现这种方法在集中我的地图方面很有用，而且我可以很容易地切断南极洲部分，因为我不需要它。|392846|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I was looking around on the Internet for a fuss-free way to center my map, and got inspired by Jan van der Laan and mbostock's answer. Here's an easier way using jQuery if you are using a container for the svg. I created a border of 95% for padding/borders etc.

<pre><code>var width = $("#container").width() * 0.95,
 height = $("#container").width() * 0.95 / 1.9 //using height() doesn't work since there's nothing inside

var projection = d3.geo.mercator().translate([width / 2, height / 2]).scale(width);
var path = d3.geo.path().projection(projection);

var svg = d3.select("#container").append("svg").attr("width", width).attr("height", height);
</code></pre>

If you looking for exact scaling, this answer won't work for you. But if like me, you wish to display a map that centralizes in a container, this should be enough. I was trying to display the mercator map and found that this method was useful in centralizing my map, and I could easily cut off the Antarctic portion since I didn't need it.

blocks|key|174865|text|要平移/缩放地图，您应该查看将SVG覆盖在Leaflet上。这将比转换SVG容易得多。请参阅此示例http://bost.ocks.org/mike/leaflet/，然后查看How+to+change+the+map+center+in+leaflet|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|174866|entityMap|0|LINK|mutability|MUTABLE|url|http://bost.ocks.org/mike/leaflet/|1|https://stackoverflow.com/questions/12735303/how-to-change-the-map-center-in-leaflet^0|1D|Y|0|2G|13|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

To pan/zoom the map you should look at overlaying the SVG on Leaflet. That will be a lot easier than transforming the SVG. See this example <a href="http://bost.ocks.org/mike/leaflet/" rel="nofollow noreferrer">http://bost.ocks.org/mike/leaflet/</a> and then <a href="https://stackoverflow.com/questions/12735303/how-to-change-the-map-center-in-leaflet">How to change the map center in leaflet</a>

blocks|key|174916|text|对于想要调整垂直方向和水平方向的人，这里有一个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|174917|++var+width++=+300;
++var+height+=+400;

++var+vis+=+d3.select("#vis").append("svg")
++++++.attr("width",+width).attr("height",+height)

++d3.json("nld.json",+function(json)+{
++++++//+create+a+first+guess+for+the+projection
++++++var+center+=+d3.geo.centroid(json)
++++++var+scale++=+150;
++++++var+offset+=+[width/2,+height/2];
++++++var+projection+=+d3.geo.mercator().scale(scale).center(center)
++++++++++.translate(offset);

++++++//+create+the+path
++++++var+path+=+d3.geo.path().projection(projection);

++++++//+using+the+path+determine+the+bounds+of+the+current+map+and+use+
++++++//+these+to+determine+better+values+for+the+scale+and+translation
++++++var+bounds++=+path.bounds(json);
++++++var+hscale++=+scale*width++/+(bounds[1][0]+-+bounds[0][0]);
++++++var+vscale++=+scale*height+/+(bounds[1][1]+-+bounds[0][1]);
++++++var+scale+++=+(hscale+<+vscale)+?+hscale+:+vscale;
++++++var+offset++=+[width+-+(bounds[0][0]+%2B+bounds[1][0])/2,
++++++++++++++++++++++++height+-+(bounds[0][1]+%2B+bounds[1][1])/2];

++++++//+new+projection
++++++projection+=+d3.geo.mercator().center(center)
++++++++.scale(scale).translate(offset);
++++++path+=+path.projection(projection);

++++++//+adjust+projection
++++++var+bounds++=+path.bounds(json);
++++++offset[0]+=+offset[0]+%2B+(width+-+bounds[1][0]+-+bounds[0][0])+/+2;
++++++offset[1]+=+offset[1]+%2B+(height+-+bounds[1][1]+-+bounds[0][1])+/+2;

++++++projection+=+d3.geo.mercator().center(center)
++++++++.scale(scale).translate(offset);
++++++path+=+path.projection(projection);

++++++//+add+a+rectangle+to+see+the+bound+of+the+svg
++++++vis.append("rect").attr('width',+width).attr('height',+height)
++++++++.style('stroke',+'black').style('fill',+'none');

++++++vis.selectAll("path").data(json.features).enter().append("path")
++++++++.attr("d",+path)
++++++++.style("fill",+"red")
++++++++.style("stroke-width",+"1")
++++++++.style("stroke",+"black")
++++});|code-block|syntax|javascript|174918|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For people who want to adjust verticaly et horizontaly, here is the solution :

<pre><code> var width = 300;
 var height = 400;

 var vis = d3.select("#vis").append("svg")
 .attr("width", width).attr("height", height)

 d3.json("nld.json", function(json) {
 // create a first guess for the projection
 var center = d3.geo.centroid(json)
 var scale = 150;
 var offset = [width/2, height/2];
 var projection = d3.geo.mercator().scale(scale).center(center)
 .translate(offset);

 // create the path
 var path = d3.geo.path().projection(projection);

 // using the path determine the bounds of the current map and use 
 // these to determine better values for the scale and translation
 var bounds = path.bounds(json);
 var hscale = scale*width / (bounds[1][0] - bounds[0][0]);
 var vscale = scale*height / (bounds[1][1] - bounds[0][1]);
 var scale = (hscale &lt; vscale) ? hscale : vscale;
 var offset = [width - (bounds[0][0] + bounds[1][0])/2,
 height - (bounds[0][1] + bounds[1][1])/2];

 // new projection
 projection = d3.geo.mercator().center(center)
 .scale(scale).translate(offset);
 path = path.projection(projection);

 // adjust projection
 var bounds = path.bounds(json);
 offset[0] = offset[0] + (width - bounds[1][0] - bounds[0][0]) / 2;
 offset[1] = offset[1] + (height - bounds[1][1] - bounds[0][1]) / 2;

 projection = d3.geo.mercator().center(center)
 .scale(scale).translate(offset);
 path = path.projection(projection);

 // add a rectangle to see the bound of the svg
 vis.append("rect").attr('width', width).attr('height', height)
 .style('stroke', 'black').style('fill', 'none');

 vis.selectAll("path").data(json.features).enter().append("path")
 .attr("d", path)
 .style("fill", "red")
 .style("stroke-width", "1")
 .style("stroke", "black")
 });
</code></pre>

blocks|key|174941|text|我是如何将Topojson居中的，在哪里我需要拉出特征：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|174942|++++++var+projection+=+d3.geo.albersUsa();

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


++++++var+tracts+=+topojson.feature(mapdata,+mapdata.objects.tx_counties);

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

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

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

++++++++svg.append("path")
++++++++++++.datum(topojson.feature(mapdata,+mapdata.objects.tx_counties))
++++++++++++.attr("d",+path)|code-block|syntax|javascript|174943|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

How I centered a Topojson, where I needed to pull out the feature:

<pre><code> var projection = d3.geo.albersUsa();

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


 var tracts = topojson.feature(mapdata, mapdata.objects.tx_counties);

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

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

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

 svg.append("path")
 .datum(topojson.feature(mapdata, mapdata.objects.tx_counties))
 .attr("d", path)
</code></pre>

Currently in d3 if you have a geoJSON object that you are going to draw you have to scale it and translate it in order to get it to the size that one wants and translate it in order to center it. This is a very tedious task of trial and error, and I was wondering if anyone knew a better way to obtain these values?

So for instance if I have this code 

<pre><code>var path, vis, xy;
xy = d3.geo.mercator().scale(8500).translate([0, -1200]);

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

vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600);

d3.json("../../data/ireland2.geojson", function(json) {
 return vis.append("svg:g")
 .attr("class", "tracts")
 .selectAll("path")
 .data(json.features).enter()
 .append("svg:path")
 .attr("d", path)
 .attr("fill", "#85C3C0")
 .attr("stroke", "#222");
});
</code></pre>

How the hell do I obtain .scale(8500) and .translate([0, -1200]) without going little by little?

Center a map in d3 given a geoJSON object

目前，在d3中，如果你有一个要绘制的geoJSON对象，你必须缩放它并对其进行平移，以使其达到所需的大小，并对其进行平移以使其居中。这是一个非常乏味的试错任务，我想知道是否有人知道更好的方法来获得这些值？举个例子，如果我有这个代码var path, vis, xy;xy = d3.geo.mercator().scale(8500).translate([0, -1200]);path = d3.

问给定geoJSON对象，使地图在d3中居中
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问给定geoJSON对象，使地图在d3中居中EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问给定geoJSON对象，使地图在d3中居中
EN