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

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());
}