javascript - ズームを使用する場合のプロトビスの可視領域の計算

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