3

私はd3にはかなり慣れていませんが、多くの例を使用してSVG散布図を作成し、ブラシを追加してユーザーがそのデータのサブセットを強調表示できるようにしました。

 var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));

 svg.append("g")
.attr("class", "brush")
.call(d3.svg.brush().x(x).y(y)
.on("brushstart", brushstart)
.on("brush", brushmove)
.on("brushend", brushend));


 function brushstart() {
 svg.classed("selecting", true);
 }

 function brushmove() {
var e = d3.event.target.extent();
circle.classed("selected", function(d) {
return e[0][0] <= d[0] && d[0] <= e[1][0]
    && e[0][1] <= d[1] && d[1] <= e[1][1];
 });
}

function brushend() {
   svg.classed("selecting", !d3.event.target.empty());
}

最終的に、私がやろうとしているのは、強調表示された領域を取得し、それを画面上の別の SVG に分解 (ズーム) して、ユーザーが詳細にドリルインできるようにすることです。だから私がやろうとしているのは、他のチャートに表示されるべきbrush.extent内に存在するデータを識別する最良の方法を見つけ出すことです.

座標を範囲の境界と比較して、各データ ポイントをループしようと考えましたが、大きな散布図を扱い始めると遅くなるようです。データのサブセットをより効率的に取得するためのより良い方法はありますか?

ありがとう

4

1 に答える 1

1

ここでは、 Crossfilter ライブラリを使用してフィルタリングを処理します。彼らは物事が効率的であることを確認するために大変な努力をしており、API は非常に簡単です。

基本的なフィドルを作成しましたが、基本的には次のコード行になります。

var xf = crossfilter(data);
var xDim = xf.dimension(function(d) { return d[0]; });
var yDim = xf.dimension(function(d) { return d[1]; });

brush.on('brush', function() {
    var extent = brush.extent();
    xDim.filterRange([extent[0][0], extent[1][0]]);
    yDim.filterRange([extent[0][1], extent[1][1]]);
    update();
});
于 2013-11-19T04:07:07.280 に答える