Skip to content

数据模糊

¥Blurring data

用于一维、二维和 RGBA 图片的 框模糊 实现;支持分数半径。

¥A box blur implementation for 1D, 2D, and RGBA images; supports fractional radius.

blur(data, radius)

js
const numbers = d3.cumsum({length: 1000}, () => Math.random() - 0.5);
d3.blur(numbers, 5); // a smoothed random walk

示例 · 源代码 · 通过应用三次移动平均变换(盒式滤波器)迭代,就地模糊数据数组,以便快速近似给定半径(非负数)的高斯核。返回给定的数据。

¥Examples · Source · Blurs an array of data in-place by applying three iterations of a moving average transform (box filter) for a fast approximation of a Gaussian kernel of the given radius, a non-negative number. Returns the given data.

blur2({data, width, height}, rx, ry)

js
const matrix = {
  width: 4,
  height: 3,
  data: [
    1, 0, 0, 0,
    0, 0, 0, 0,
    0, 0, 0, 1
  ]
};

d3.blur2(matrix, 1);

示例 · 源代码 · 通过应用半径为 rx 的水平模糊和半径为 ry(默认为 rx)的垂直模糊,就地模糊给定宽度和高度的矩阵。矩阵值数据存储在一个平面(一维)数组中。如果未指定高度,则根据给定的宽度和数据长度推断高度。返回模糊矩阵 {data, width, height}。

¥Examples · Source · Blurs a matrix of the given width and height in-place by applying a horizontal blur of radius rx and a vertical blur of radius ry (which defaults to rx). The matrix values data are stored in a flat (one-dimensional) array. If height is not specified, it is inferred from the given width and data.length. Returns the blurred matrix {data, width, height}.

blurImage(imageData, rx, ry)

js
const imageData = context.getImageData(0, 0, width, height);
d3.blurImage(imageData, 5);

示例 · 源代码 · 对给定的 ImageData 进行原地模糊处理,通过应用半径为 rx 的水平模糊和半径为 ry(默认为 rx)的垂直模糊,分别对每个 RGBA 图层进行模糊处理。返回模糊后的图片数据。

¥Examples · Source · Blurs the given ImageData in-place, blurring each of the RGBA layers independently by applying an horizontal blur of radius rx and a vertical blur of radius ry (which defaults to rx). Returns the blurred ImageData.