d3 的 path.bounds 是如何工作的？

Question

我有一个 TopoJson 格式的文件 world.topo.json，我从 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]]"

第一个数组是当前的translate，第二个是边界。

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

[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]]"

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

Answer 1

关于path.bounds(object)的documentation已经覆盖了：

返回指定 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]]