图表中的筛选：d3.js交互教程第二部分

2024-02-18 04:04:10

D3.js 核心概念：交互（二）——刷选之二

在上一篇文章中，我们介绍了 d3-brush 模块的基础知识，以及如何使用它来创建基本的刷选交互。在本文中，我们将深入研究 d3-brush 的一些更高级特性，包括如何使用它来创建多重刷选、如何使用它来过滤数据，以及如何使用它来创建自定义刷选行为。

多重刷选

多重刷选允许用户同时在多个图表中进行刷选。这对于比较不同数据集或从不同角度查看相同数据集非常有用。要创建多重刷选，您需要使用 d3-brush 的 brushX() 和 brushY() 方法来创建两个或多个刷选。然后，您可以使用 d3-brush 的 brush() 方法将这些刷选连接起来。当用户在任何一个刷选中进行刷选时，所有连接的刷选都会相应地更新。

过滤数据

d3-brush 还可用于过滤数据。要过滤数据，您需要使用 d3-brush 的 extent() 方法来获取当前刷选的范围。然后，您可以使用 d3-selection 的 filter() 方法来选择符合该范围的数据点。例如，以下代码将选择所有位于 x 轴上 0 和 100 之间以及 y 轴上 0 和 200 之间的数据点：

var selection = d3.selectAll("circle")
  .filter(function(d) {
    return d.x >= 0 && d.x <= 100 && d.y >= 0 && d.y <= 200;
  });

自定义刷选行为

d3-brush 还允许您创建自定义刷选行为。这对于创建具有特定功能的刷选非常有用。例如，您可以创建允许用户选择单个数据点的刷选，或者创建允许用户选择矩形区域的刷选。要创建自定义刷选行为，您需要扩展 d3-brush 的 BrushBehavior 类。例如，以下代码创建一个允许用户选择单个数据点的刷选行为：

var brushBehavior = d3.brushBehavior()
  .on("start", function() {
    d3.selectAll("circle").classed("selected", false);
  })
  .on("brush", function() {
    var selection = d3.event.selection;
    d3.selectAll("circle")
      .filter(function(d) {
        return d3.brushSelection(this) === selection;
      })
      .classed("selected", true);
  });