2017-04-11 72 views
0

我试图构建一个平行坐标图,如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"; 
 
    }); 
 
}

回答

0

我能够通过参考从V4例如前述的代码段,以解决这个问题。

我最初的做法是遍历画笔,并使用每个画笔的属性来确定当前点是否包含在其范围内。从概念上讲,这是正确的。

但是,不是指画笔,d3.event包含我需要的所有信息。

const [upperBound, lowerBound] = d3.event.selection.map(scale.invert, scale); 
 

 
// Or 
 

 
const bounds = [scale(d3.event.selection), scale.invert(d3.event.selection)];

换句话说...

d3.event.selection的数据是一个数对需要被施加到维的scale(轴)的刷包含在内。

一旦你有画笔的边界,很容易弄清楚是否点问题包含在边界内。

return val >= lowerBound && val <= upperBound