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

您应该能够通过将转换矩阵应用于其顶部和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());
}