Question

我们正在使用的平行坐标图和图的数据可以找到here。此平行坐标图不适用于d3的第4版。我们根据从v3到v4的API更改进行了更改。我认为主要问题在于如下所示的刷子功能。

var results  = source.ToAsyncEnumerable().Buffer(10);

日志显示活动的“Array []”。目前我们将每个维度刷子范围设置为[[-8,0]，[8，高度]]，这也可能是一个问题。完整代码如下。

function brush() {
    let actives = dimensions.filter(function (p) {
        return d3.brushSelection(y[p]) !== null;
    });

    console.log(actives);
    let extents = actives.map(function (p) {
            return d3.brushSelection(y[p]);
    });

    foreground.style("display", function (d) {
        return actives.every(function (p, i) {
            return extents[i][0] <= d[p] && d[p] <= extents[i][1];
        }) ? null : "none";
    });
}

如果有人熟悉d3并且可以提供任何指导，我们将不胜感激。我们还尝试在画笔函数中使用d3.event.selection和y [p] .brush.selection。

Answer 1

我偶然发现了同样的问题，但在下面的修改后设法解决了这个问题。

以这种方式为每个轴添加画笔：

y[d] = d3.scaleLinear().domain(d3.extent(data, function(p) {
  return +p[d];
})).range([height, 0]);
y[d].brush = d3.brushY()
  .extent([[-8, y[d].range()[1]], [8, y[d].range()[0]]])
  .on('brush', brush);

随后，在添加画笔组时将上面作为画笔回调：

g.append('g')
  .attr('class', 'brush')
  .each(function(d) {
    d3.select(this).call(y[d].brush);
  })
  .selectAll('rect')
  .attr('x', -8)
  .attr('width', 16);

最后，将画笔处理程序更改为：

function brush() {
  const actives = [];
  // filter brushed extents
  svg.selectAll('.brush')
    .filter(function(d): any {
      return d3.brushSelection(this as any);
    })
    .each(function(d) {
      actives.push({
        dimension: d,
        extent: d3.brushSelection(this as any)
      });
    });
  // set un-brushed foreground line disappear
  foreground.style('display', function(d) {
    return actives.every(function(active) {
      const dim = active.dimension;
      return active.extent[0] <= y[dim](d[dim]) && y[dim](d[dim]) <= active.extent[1];
    }) ? null : 'none';
  });
}

如果上面的内容令人困惑，请参阅此独立示例，该示例帮助我正确地使用d3 v4刷平行坐标：https://gist.github.com/kotomiDu/d1fd0fe9397db41f5f8ce1bfb92ad20d

D3 v4平行坐标图画笔选择

1 个答案: