Mikeの例hereに示すように、平行座標グラフを作成しようとしています。 So far so goodしかし、私はブラシイベント処理にいくつかの問題があります。d3.js:複数のブラシを扱う
マイクの使用例v3、v4を使用しています。 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";
});
}