path.bounds()如何工作?

use*_*662 4 d3.js

有人能告诉我以下代码究竟发生了什么?我知道它用于缩放,但是在这个上下文中2-d边界数组的作用是什么?

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];
Run Code Online (Sandbox Code Playgroud)

提前致谢.

Pau*_*ine 12

有充分证据:

计算指定要素的投影边界框(以像素为单位).这对于放大特定功能非常方便.该方法观察由投影流执行的任何剪切和重采样.

如下图所示,中心是高度的一半和宽度的一半.对于缩放计算,请参阅我对这个问题的答案,该问题涉及对象的居中.

在此输入图像描述


这是D3 v4的新(2016)文档链接,这里是输出数组结构的解释:

边界框由二维数组表示:[[x 0,y 0],[x 1,y 1]],其中x 0是最小x坐标,y 0是最小y坐标,x 1是最大x坐标, y 1是最大y坐标.

宽度和高度:

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

//       y-max          y-min
height = bounds[1][1] - bounds[0][1];
Run Code Online (Sandbox Code Playgroud)