通过brushing实现百万级数据的散点图平滑交互

前言

在数据可视化交互中，利用鼠标点击划选拖拽，是我们最常用的交互之一了，我们称之为brushing。这种交互可以帮助用户快速地从海量数据中筛选出感兴趣的部分，进行进一步的探索分析。

本文将介绍如何利用流行的数据可视化库d3和其扩展库d3-quadtree，来实现一个百万级数据的散点图的brushing交互。同时，我们还将探讨当数据量增大时，如何对d3进行优化，以保证交互的流畅性。

实现brushing交互

数据准备

首先，我们需要准备一份散点图数据，这里我们使用d3-dsv库从一个csv文件中读取数据：

d3.dsv(",", "data.csv", function(d) {
  return {
    x: +d.x,
    y: +d.y
  };
}).then(function(data) {
  // 后续处理
});

创建散点图

有了数据，我们就可以创建散点图了：

const margin = {top: 20, right: 20, bottom: 30, left: 40};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const x = d3.scaleLinear()
  .range([0, width]);

const y = d3.scaleLinear()
  .range([height, 0]);

const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);

svg.append("g")
  .attr("class", "x-axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y-axis")
  .call(yAxis);

const dots = svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("r", 3)
  .attr("cx", function(d) { return x(d.x); })
  .attr("cy", function(d) { return y(d.y); });

添加brushing交互

现在，我们来添加brushing交互。首先，我们需要创建一个d3-quadtree，它可以帮助我们快速查找选区内的点：

const quadtree = d3.quadtree()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })(data);

然后，我们可以监听鼠标拖拽事件，并在拖拽结束后判断选区内的点：

const brush = d3.brush()
  .on("end", brushed);

svg.append("g")
  .attr("class", "brush")
  .call(brush);

function brushed() {
  const extent = d3.event.selection;
  if (!extent) {
    dots.classed("selected", false);
    return;
  }
  dots.classed("selected", function(d) {
    return quadtree.find(extent[0][0], extent[0][1], extent[1][0], extent[1][1]) === d;
  });
}

性能优化

当数据量增大时，d3的性能可能会下降。这里有一些优化技巧：

使用quadtree

如前所述，我们可以使用d3-quadtree来加速选区内的点查找。

减少更新的元素数量

在brushing交互中，我们不需要更新所有点的样式，只需要更新选区内的点。我们可以通过以下代码来实现：

dots.classed("selected", function(d) {
  if (!extent) return false;
  return quadtree.find(extent[0][0], extent[0][1], extent[1][0], extent[1][1]) === d;
});

使用requestAnimationFrame

requestAnimationFrame可以帮助我们避免频繁的重绘，从而提高性能。我们可以将brush的end事件监听器修改如下：

brush.on("end", function() {
  requestAnimationFrame(brushed);
});

总结

本文介绍了如何在散点图中利用d3和d3-quadtree实现brushing交互，并探讨了当数据量增大时的性能优化技巧。通过这些优化，我们可以实现百万级数据的平滑交互，从而帮助用户更有效地探索分析数据。