jitter.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import { Band } from '@antv/scale';
  2. import { deepMix } from '@antv/util';
  3. import { column, columnOf } from './utils/helper';
  4. import { domainOf } from './utils/order';
  5. export function rangeOf(value, scaleOptions, padding) {
  6. if (value === null)
  7. return [-0.5, 0.5];
  8. const domain = domainOf(value, scaleOptions);
  9. const scale = new Band({ domain, range: [0, 1], padding });
  10. const step = scale.getBandWidth();
  11. return [-step / 2, step / 2];
  12. }
  13. export function interpolate(t, a, b) {
  14. return a * (1 - t) + b * t;
  15. }
  16. /**
  17. * The jitter transform produce dx and dy channels for marks (especially for point)
  18. * with ordinal x and y dimension, say to make them jitter in their own space.
  19. */
  20. export const Jitter = (options = {}) => {
  21. const { padding = 0, paddingX = padding, paddingY = padding, random = Math.random, } = options;
  22. return (I, mark) => {
  23. const { encode, scale } = mark;
  24. const { x: scaleX, y: scaleY } = scale;
  25. const [X] = columnOf(encode, 'x');
  26. const [Y] = columnOf(encode, 'y');
  27. const rangeX = rangeOf(X, scaleX, paddingX);
  28. const rangeY = rangeOf(Y, scaleY, paddingY);
  29. const DY = I.map(() => interpolate(random(), ...rangeY));
  30. const DX = I.map(() => interpolate(random(), ...rangeX));
  31. return [
  32. I,
  33. deepMix({
  34. scale: {
  35. x: { padding: 0.5 },
  36. y: { padding: 0.5 },
  37. },
  38. }, mark, {
  39. encode: { dy: column(DY), dx: column(DX) },
  40. }),
  41. ];
  42. };
  43. };
  44. Jitter.props = {};
  45. //# sourceMappingURL=jitter.js.map