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 回答