Question

在缩放时是否有某种方法可以获得面板的可见区域。一世有一个力导向图，我有兴趣获得所有缩放事件后可见区域中的元素。有什么建议？感谢

Answer 1

您可以通过transform参数访问面板的当前转换矩阵。因此，在以下示例中：

var vis = new pv.Panel()
    .width(200)
    .height(200);

var panel = vis.add(pv.Panel)
    .event("mousewheel", pv.Behavior.zoom(1))
    .fillStyle('#ccc');

var dot = panel.add(pv.Dot)
    .data([[25,25],[25,75],[75,25],[75,75]])
    .top(function(d) d[0])
    .left(function(d) d[1])
    .size(30)
    .fillStyle('#999');

vis.render();

如果您加载此示例，然后缩放一下，您可以访问当前转换矩阵，如下所示：

var t = panel.transform(),
    tk = t.k, // scale factor, applied before x/y
    tx = t.x, // x-offset
    ty = t.y; // y-offset

您应该能够通过将变换矩阵应用于其dot和top参数来确定子标记（例如，在此示例中为left）是否在可见区域内然后检查它们是否在面板的原始边界框内（0,0,200,200）。对于上面的dot，您可以像这样检查：

function(d) {
    var t = panel.transform(),
        // assuming the current dot instance is accessible as "this"
        x = (this.left() + t.x) * t.k, // apply transform to dot x position
        y = (this.top() + t.y) * t.k;  // apply transform to dot y position
    // check bounding box. Note that this is a little simplistic - 
    // I'm just checking dot center, not edges
    return x > panel.left() && x < (panel.left() + panel.width()) &&
           y > panel.top() && y < (panel.top() + panel.height());
}

使用缩放时计算protovis中的可见区域

1 个答案: