【问题标题】:How does path.bounds() work?path.bounds() 是如何工作的?
【发布时间】:2014-08-14 14:17:45
【问题描述】:

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

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];

提前致谢。

【问题讨论】:

  • 这个方法返回边界框(包围物体的最小矩形),它是一种简单的计算中心的方法。
  • 所以path.bounds() 输出为[[left,top],[right,bottom]]。不同于geo.path.bounds() 输出[[left, bottom], [right, top]] 和API。可能需要放到github api中。

标签: d3.js


【解决方案1】:

还好documented:

计算指定特征的投影边界框(以像素为单位)。例如,这对于放大特定功能非常方便。此方法观察投影流执行的任何裁剪和重采样。

如下图所示,中心是一半高一半宽的点。缩放计算见my answer to this question about centering an object。


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

边界框用二维数组表示:[[x₀, y₀], [x₁, y₁]],其中x₀是x坐标的最小值,y₀是y坐标的最小值,x₁是x的最大值- 坐标,y₁ 是最大 y 坐标。

对于宽度和高度:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-07-24
    • 2016-11-13
    • 2017-10-11
    • 2021-10-13
    • 2011-02-24
    • 2013-11-16
    • 2011-10-16
    • 2012-11-03
    相关资源
    最近更新 更多