コンテンツにスキップ

データのぼかし

1次元、2次元、およびRGBA画像用のボックスぼかしの実装。小数半径をサポートします。

blur(data, radius)

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

· ソース · 非負の数値である指定された*radius*のガウスカーネルの高速近似のために、移動平均変換(ボックスフィルタ)の3回の反復を適用することにより、*data*の配列をインプレースでぼかします。指定された*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*)の垂直ぼかしを適用することにより、指定された*width*と*height*の行列をインプレースでぼかします。行列の値*data*は、フラットな(1次元)配列に格納されます。*height*が指定されていない場合、指定された*width*と*data*.lengthから推測されます。ぼかした行列{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レイヤーのそれぞれを個別にぼかします。ぼかしたImageDataを返します。