curve.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. var __rest = (this && this.__rest) || function (s, e) {
  2. var t = {};
  3. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  4. t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  6. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  8. t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { area, areaRadial } from 'd3-shape';
  13. import { Path } from '@antv/g';
  14. import { select } from '../../utils/selection';
  15. import { isPolar, isTranspose } from '../../utils/coordinate';
  16. import { angleWithQuadrant, sub, dist } from '../../utils/vector';
  17. import { applyStyle, computeGradient, getShapeTheme, getTransform, } from '../utils';
  18. import { subObject } from '../../utils/helper';
  19. import { createElement } from '../../utils/createElement';
  20. const DoubleArea = createElement((g) => {
  21. const { areaPath, connectPath, areaStyle, connectStyle } = g.attributes;
  22. select(g)
  23. .maybeAppend('connect-path', () => new Path({}))
  24. .style('d', connectPath)
  25. .call(applyStyle, connectStyle);
  26. select(g)
  27. .maybeAppend('area-path', () => new Path({}))
  28. .style('d', areaPath)
  29. .call(applyStyle, areaStyle);
  30. });
  31. /**
  32. * Given a points sequence, split it into an array of defined points
  33. * and an array of undefined segments.
  34. *
  35. * Input - [p0, p1, p2, p3, p4, p5], p1 ~ p2 is `Y1`, p3 ~ p5 is `Y0`.
  36. * Output - When all of Y1 & Y0 is defined, move into defined points, or else undefined segments.
  37. */
  38. function segmentation(points, defined) {
  39. const definedPointsY1 = [];
  40. const definedPointsY0 = [];
  41. const segments = [];
  42. let m = false; // Is in a undefined sequence.
  43. let dp = null; // The previous defined point.
  44. const mid = points.length / 2;
  45. for (let i = 0; i < mid; i++) {
  46. const y1 = points[i];
  47. const y0 = points[i + mid];
  48. // If current point is a undefined point,
  49. // enter a undefined sequence.
  50. if ([...y1, ...y0].some((v) => !defined(v)))
  51. m = true;
  52. else {
  53. definedPointsY1.push(y1);
  54. definedPointsY0.push(y0);
  55. // If current point is a defined point,
  56. // and is in a undefined sequence, save
  57. // the two closest defined points as this
  58. // undefined sequence and exit it.
  59. if (m && dp) {
  60. m = false;
  61. const [dpy1, dpy0] = dp;
  62. segments.push([dpy1, y1, dpy0, y0]);
  63. }
  64. // Update the previous defined point.
  65. dp = [y1, y0];
  66. }
  67. }
  68. return [definedPointsY1.concat(definedPointsY0), segments];
  69. }
  70. export const Curve = (options) => {
  71. const { curve, gradient = false, defined = (d) => !Number.isNaN(d) && d !== undefined && d !== null, connect: connectNulls = false } = options, style = __rest(options, ["curve", "gradient", "defined", "connect"]);
  72. return (P, value, coordinate, theme) => {
  73. const { mark, shape, defaultShape } = value;
  74. const _a = getShapeTheme(theme, mark, shape, defaultShape), { defaultColor } = _a, defaults = __rest(_a, ["defaultColor"]);
  75. const { color = defaultColor, seriesColor: sc, seriesX: sx, seriesY: sy, } = value;
  76. const transform = getTransform(coordinate, value);
  77. const fill = gradient && sc ? computeGradient(sc, sx, sy, gradient) : color;
  78. const finalStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, defaults), { stroke: fill, fill: fill }), (transform && { transform })), style);
  79. const [DP, MS] = segmentation(P, defined);
  80. const connectStyle = subObject(finalStyle, 'connect');
  81. const missing = !!MS.length;
  82. const getPathNode = (path) => {
  83. return select(new Path({}))
  84. .style('d', path)
  85. .call(applyStyle, finalStyle)
  86. .node();
  87. };
  88. if (!isPolar(coordinate)) {
  89. /**
  90. * Draw area shape by points.
  91. */
  92. const areaPath = (points) => {
  93. const Y1 = points.slice(0, points.length / 2);
  94. const Y0 = points.slice(points.length / 2);
  95. return isTranspose(coordinate)
  96. ? area()
  97. .y((_, idx) => Y1[idx][1])
  98. .x1((_, idx) => Y1[idx][0])
  99. .x0((_, idx) => Y0[idx][0])
  100. .defined((_, idx) => [...Y1[idx], ...Y0[idx]].every(defined))
  101. .curve(curve)(Y1)
  102. : area()
  103. .x((_, idx) => Y1[idx][0])
  104. .y1((_, idx) => Y1[idx][1])
  105. .y0((_, idx) => Y0[idx][1])
  106. .defined((_, idx) => [...Y1[idx], ...Y0[idx]].every(defined))
  107. .curve(curve)(Y1);
  108. };
  109. // Draw one area of connected defined points.
  110. if (!missing || (connectNulls && !Object.keys(connectStyle).length)) {
  111. return getPathNode(areaPath(DP));
  112. }
  113. // Draw one area of unconnected defined points.
  114. if (missing && !connectNulls) {
  115. return getPathNode(areaPath(P));
  116. }
  117. // Draw two area.
  118. // One for unconnected defined points.
  119. // One for connected segments.
  120. return select(new DoubleArea())
  121. .style('areaStyle', finalStyle)
  122. .style('connectStyle', Object.assign(Object.assign({}, connectStyle), style))
  123. .style('areaPath', areaPath(P))
  124. .style('connectPath', MS.map(areaPath).join(''))
  125. .node();
  126. }
  127. else {
  128. /**
  129. * Draw areaRadial shape by points.
  130. */
  131. const areaRadialPath = (points) => {
  132. const center = coordinate.getCenter();
  133. const Y1 = points.slice(0, points.length / 2);
  134. const Y0 = points.slice(points.length / 2);
  135. return areaRadial()
  136. .angle((_, idx) => angleWithQuadrant(sub(Y1[idx], center)))
  137. .outerRadius((_, idx) => dist(Y1[idx], center))
  138. .innerRadius((_, idx) => dist(Y0[idx], center))
  139. .defined((_, idx) => [...Y1[idx], ...Y0[idx]].every(defined))
  140. .curve(curve)(Y0);
  141. };
  142. // Draw one area of connected defined points.
  143. if (!missing || (connectNulls && !Object.keys(connectStyle).length)) {
  144. return getPathNode(areaRadialPath(DP));
  145. }
  146. // Draw one area of unconnected defined points.
  147. if (missing && !connectNulls) {
  148. return getPathNode(areaRadialPath(P));
  149. }
  150. // Draw two area.
  151. // One for unconnected defined points.
  152. // One for connected segments.
  153. return select(new DoubleArea())
  154. .style('areaStyle', finalStyle)
  155. .style('connectStyle', Object.assign(Object.assign({}, connectStyle), style))
  156. .style('areaPath', areaRadialPath(P))
  157. .style('connectPath', MS.map(areaRadialPath).join(''))
  158. .node();
  159. }
  160. };
  161. };
  162. Curve.props = {
  163. defaultMarker: 'smooth',
  164. defaultEnterAnimation: 'fadeIn',
  165. defaultUpdateAnimation: 'morphing',
  166. defaultExitAnimation: 'fadeOut',
  167. };
  168. //# sourceMappingURL=curve.js.map