1

我有一个world.topo.jsonTopoJson 格式的文件，我从https://datamaps.github.io/获取并在d3地理图表中使用它（使用merchant投影）。

它运作良好，但当我调用path.bounds(<TopoJson File Content>.objects.world.feature)并获取这些值时，我觉得很奇怪：

[
    [-25.272818452358365, -114.9648719971861],
    [917.2049776245796, 507.5180814546301]
]

那么，为什么底部/左角指向 -25 和 -114？它们不应该是两者之一0,0还是-917, -507相反？

更新：我有一个绑定到我的 d3 图表的缩放行为对象，它完全符合我的预期。因此，我console.log为每个缩放/拖动编写了一个，如下所示：

const topojson = <response of an ajax request>;
const bounds = path.bounds(topojson.objects.world.feature);
console.log(translate, JSON.stringify(path.bounds(feature))); // XXX

所以，每次缩放/拖动甚至被调用，这就是我得到的输出类型：

[25, 120] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"

第一个数组是当前翻译，第二个是边界。

但是，当我拖动/平移或缩放时，输出如下：

[0.021599999999999998, 0.10368] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[24.88185889212827, 119.4329226822157] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[25, 120] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[25, 120] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-15, 119] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-27, 117] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-27.32184332502962, 117.03468139278337] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-125.83796642848066, 127.65064293410353] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-165.15379127139124, 131.88726199045166] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-173.98081187505056, 132.83844955550114] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-173.98081187505056, 132.83844955550114] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-173.4557969093005, 132.7818746669505] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-89.06290511198648, 123.68781305086063] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"
[-89.06290511198648, 123.68781305086063] "[[-25.272818452358365,-114.9648719971861],[917.2049776245796,507.5180814546301]]"

如您所见，尽管第一个参数根据缩放和平移事件不断变化，但边界保持不变。

4

1 回答 1

1

关于它的文档包括：path.bounds(object)

返回指定 GeoJSON 对象的投影平面边界框（通常以像素为单位）。边界框由一个二维数组表示：[[x₀, y₀], [x₁, y₁]]，其中x₀是最小x坐标，y₀是最小y坐标，x₁是最大x坐标， y₁ 是最大 y 坐标。

因此，-25 和 -114 是最小值x和y值，并且指的是左上角（在 SVG 坐标系中），而不是左下角。

请记住，这path.bounds与 不同geoBounds：

返回指定 GeoJSON 特征的球形边界框。边界框用二维数组表示：[[left, bottom], [right, top]]，其中left为最小经度，bottom为最小纬度，right为最大经度，top为最大纬度.

它是如何工作的？

path.bounds(object)将使用您的投影在对象周围绘制一个“矩形”，并将返回一个包含该矩形四个角的数组，如上所述。让我们看看它在这些演示中是如何工作的（这段代码不是我的）：

在第一个演示中，日本地图的比例尺为 1000。检查控制台以查看path.bounds。

var topoJsonUrl = "https://dl.dropboxusercontent.com/u/1662536/topojson/japan.topo.json";

var width = 500,
    height = 500,
    scale = 1;

d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
    .append("g").attr("id", "all-g");

var projection = d3.geo.mercator()
		.center([138, 38])
		.scale(1000)
		.translate([width / 2, height / 2]);
    
d3.json(topoJsonUrl, onLoadMap);

function onLoadMap (error, jpn) {
    var path = d3.geo.path()
        		.projection(projection);
	var features = topojson.object(jpn, jpn.objects.japan);
  
  var mapJapan = features;
  
 console.log(JSON.stringify(path.bounds(mapJapan)))
  

	d3.select("#all-g")
        .append("g").attr("id", "path-g").selectAll("path")
            .data(features.geometries)
            .enter()
            .append("path")
            .attr("fill", "#f0f0f0")
            .attr("id", function(d,i){ return "path" + i})
            .attr("stroke", "#999")
            .attr("stroke-width", 0.5/scale)
            .attr("d", path);

}
path {
  stroke: black;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>

它记录：

[[-12.878670523380151,73.71036362631844],[529.0014631418044,535.5463567314675]]

其中是 [[x0, y0],[x1, y1]] 值。

现在相同的代码，但规模为 500：

var topoJsonUrl = "https://dl.dropboxusercontent.com/u/1662536/topojson/japan.topo.json";

var width = 500,
    height = 500,
    scale = 1;

d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
    .append("g").attr("id", "all-g");

var projection = d3.geo.mercator()
		.center([138, 38])
		.scale(500)
		.translate([width / 2, height / 2]);
    
d3.json(topoJsonUrl, onLoadMap);

function onLoadMap (error, jpn) {
    var path = d3.geo.path()
        		.projection(projection);
	var features = topojson.object(jpn, jpn.objects.japan);
  
  var mapJapan = features;
  
 console.log(JSON.stringify(path.bounds(mapJapan)))
  

	d3.select("#all-g")
        .append("g").attr("id", "path-g").selectAll("path")
            .data(features.geometries)
            .enter()
            .append("path")
            .attr("fill", "#f0f0f0")
            .attr("id", function(d,i){ return "path" + i})
            .attr("stroke", "#999")
            .attr("stroke-width", 0.5/scale)
            .attr("d", path);

}
path {
  stroke: black;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>

它记录不同的值：

[[118.56066473830992,161.85518181315928],[389.5007315709022,392.77317836573377]]
于 2016-10-23T09:26:04.907 回答