2017-04-11 22 views
0

Mikeの例hereに示すように、平行座標グラフを作成しようとしています。 So far so goodしかし、私はブラシイベント処理にいくつかの問題があります。d3.js:複数のブラシを扱う

マイクの使用例v3v4を使用しています。 v4のアップデートでが削除され、d3.brushSelection(node)のままこの役割を果たしました。

これはライブラリを初めて使用しているため、一部のシナリオで選択範囲を反復処理する方法を十分に理解できていません。 APIがselection.node()を引数として望んでいるようですが、私の選択は1ではなくブラシのコレクションです。

これは、単純なJS構造(Mikeに似ています)でv4で実装する方法はありますか?以下は

v3の

function brush() { 
 
    var actives = dimensions.filter(function(p) { 
 
     return !y[p].brush.empty(); 
 
    }), 
 
    extents = actives.map(function(p) { 
 
     return y[p].brush.extent(); 
 
    }); 
 
    foreground.style("display", function(d) { 
 
    return actives.every(function(p, i) { 
 
     return extents[i][0] <= d[p] && d[p] <= extents[i][1]; 
 
    }) ? null : "none"; 
 
    }); 
 
}

そしてここでブラシイベントハンドラのマイクの実装はイベントハンドラがparallel coordinates in v4を実施し、インターネットの匿名種類魂で再びです。ボーナス(理論的)は、このコードがどのように機能しているかを説明できる人を指します。

function brush_parallel_chart() { 
 
    for (var i = 0; i < dimensions.length; ++i) { 
 
    if (d3.event.target == y[dimensions[i]].brush) { 
 
     extents[i] = d3.event.selection.map(y[dimensions[i]].invert, y[dimensions[i]]); 
 

 
    } 
 
    } 
 

 
    foreground.style("display", function(d) { 
 
    return dimensions.every(function(p, i) { 
 
     if (extents[i][0] == 0 && extents[i][0] == 0) { 
 
     return true; 
 
     } 
 
     return extents[i][1] <= d[p] && d[p] <= extents[i][0]; 
 
    }) ? null : "none"; 
 
    }); 
 
}

答えて

0

IはV4例から前述スニペットを参照することによってこの問題を解決することができました。

最初のアプローチでは、ブラシを繰り返し、各ブラシの属性を使用して現在のポイントがその範囲に含まれているかどうかを確認しました。概念的には正しいです。

ブラシを参照する代わりに、d3.eventに必要なすべての情報が含まれています。すなわち

const [upperBound, lowerBound] = d3.event.selection.map(scale.invert, scale); 
 

 
// Or 
 

 
const bounds = [scale(d3.event.selection), scale.invert(d3.event.selection)];

... d3.event.selectionから

データは、ブラシである寸法(軸)のscaleに適用する必要がある番号のペアであります

ブラシの境界線を設定したら、次の点がわかりますその質問には質問が含まれています。

return val >= lowerBound && val <= upperBound

関連する問題