我试图构建一个平行坐标图,如Mike的示例here所示。 So far so good,但我在刷事件处理方面遇到了一些麻烦。d3.js:处理多个笔刷
Mike的示例使用v3,我正在使用v4。 v4更新删除了brush.empty()
,而d3.brushSelection(node)
则完成此角色。
这是我第一次使用库,所以我没有完全理解如何在某些场景中迭代选择。看起来API需要selection.node()
作为参数,但我的选择不是1,而是一组画笔。
有没有一种方法可以在v4中用简单的JS构造(类似于Mike's)来实现?
下面是麦克在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";
});
}