zooming - 如何识别 D3 画笔中包含的散点图数据点？

Question

我是 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 中应该显示在其他图表中的那些数据。

我考虑过尝试遍历每个数据点，将其坐标与范围的边界进行比较，但如果我开始处理大型散点图，这似乎会很慢。有没有更好的方法可以更有效地获取数据子集？

谢谢

Answer 1

我会使用 Crossfilter library在这里为我处理过滤。他们付出了艰苦的努力来确保事情高效进行，而且 API 非常简单。

我已经建立了 a fiddle与基础知识，但基本上它相当于这些代码行:

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