11、D3数据可视化：画笔与布局的应用

D3数据可视化：画笔与布局的应用

1. 画笔（Brushes）的使用

1.1 画笔概述

画笔类似于缩放和拖动操作，是创建复杂交互行为的简单方式，它能让用户选择画布的一部分。虽然画笔主要用于视觉效果，但它并不被视为一种行为，而是属于 .svg 命名空间。

创建新画笔时，可调用 d3.svg.brush() 并使用 .x() 和 .y() 定义其 x 和 y 比例尺，还能定义一个边界矩形。

1.2 示例：监狱人口图表交互

以下是一个使用画笔实现监狱人口图表交互的示例。首先，创建一个新类 SelectableInteractivePrisonChart 继承自 InteractivePrisonPopulationChart ：

export class SelectableInteractivePrisonChart extends 
InteractivePrisonPopulationChart {
  constructor(path) {
    super(path);
  }
  addUIElements() {}
  brushstart() {}
  brush() {}
  brushend() {}
  rightclick() {}
}

在 addUIElements 方法中添加画