Question

我尝试构建一个并行坐标图，如Mike的例子here所示。 So far so good，但我在刷子事件处理方面遇到了一些麻烦。

Mike的示例使用 v3 ，我正在使用 v4 。 v4更新已删除brush.empty()，让d3.brushSelection(node)完成此角色。

这是我第一次使用该库，因此我不完全了解如何在某些情况下迭代选择。似乎API希望selection.node()作为参数，但我的选择不是1而是一组画笔。

有没有办法在v4中使用简单的JS结构实现这一点（类似于Mike？）

以下是Mike在v3中实现的刷子事件处理程序

＆＃13;

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

＆＃13;

这是互联网的一个善良的灵魂再次实施的事件处理程序，他实施了parallel coordinates in v4。奖金（理论）指向任何可以解释此代码如何工作的人。

＆＃13;

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

＆＃13;

Answer 1

我能够通过引用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

d3.js：处理多个画笔

1 个答案: