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

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

1 个答案: