d3.js - path.bounds() 如何工作？

Question

有人能告诉我下面的代码到底发生了什么吗？我知道它用于缩放，但是在这种情况下二维边界数组有什么作用？

var bounds = path.bounds(d), 
    dx = bounds[1][0] - bounds[0][0], 
    dy = bounds[1][1] - bounds[0][1],
    x = (bounds[0][0] + bounds[1][0]) / 2,
    y = (bounds[0][1] + bounds[1][1]) / 2,
            scale = .9 / Math.max(dx / width, dy / height),
    translate = [width / 2 - scale * x, height / 2 - scale * y];

提前致谢。

Answer 1

很好documented :

Computes the projected bounding box (in pixels) for the specified feature. This is handy for, say, zooming in to a particular feature. This method observes any clipping and resampling performed by the projection stream.

如下图所示，中心是高度一半和宽度一半的点。有关缩放计算，请参阅 my answer to this question about centering an object .



Here is the new (2016) documentation link for D3 v4这是对输出数组结构的解释:

The bounding box is represented by a two-dimensional array: [[x₀, y₀], [x₁, y₁]], where x₀ is the minimum x-coordinate, y₀ is the minimum y-coordinate, x₁ is maximum x-coordinate, and y₁ is the maximum y-coordinate.

对于宽度和高度:

//       x-max          x-min
width  = bounds[1][0] - bounds[0][0];

//       y-max          y-min
height = bounds[1][1] - bounds[0][1];