当前位置：文江博客话题详情

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

发布于 2024-10-25 00:16:08 字数 75 浏览 9 评论 0原文

有没有办法在缩放时获得面板的可见区域。我有一个力定向图，我有兴趣获得所有缩放事件后位于可见区域的元素。有什么建议吗？谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小姐丶请自重 2024-11-01 00:16:08

您可以通过 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)。对于上面的点，您可以这样检查：

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

You can access the current transformation matrix of a panel via the transform parameter. So, in the following example:

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

If you load this example, then zoom around a bit, you can access the current transformation matrix like this:

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

You should be able to determine whether a child mark (e.g., in this example, dot) is in the visible area by applying the transformation matrix to its top and left parameters and then checking to see whether they're within the panel's original bounding box (0,0,200,200). For the dot above, you could check like this:

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

回复收藏 0 原文

~没有更多了~