selection.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. import { Group, Rect, Circle, Path, Text, Ellipse, Image, Line, Polygon, Polyline, HTML, } from '@antv/g';
  2. import { group } from 'd3-array';
  3. import { error } from './helper';
  4. export function select(node) {
  5. return new Selection([node], null, node, node.ownerDocument);
  6. }
  7. /**
  8. * A simple implementation of d3-selection for @antv/g.
  9. * It has the core features of d3-selection and extended ability.
  10. * Every methods of selection returns new selection if elements
  11. * are mutated(e.g. append, remove), otherwise return the selection itself(e.g. attr, style).
  12. * @see https://github.com/d3/d3-selection
  13. * @see https://github.com/antvis/g
  14. * @todo Nested selections.
  15. * @todo More useful functor.
  16. */
  17. export class Selection {
  18. constructor(elements = null, data = null, parent = null, document = null, selections = [
  19. null,
  20. null,
  21. null,
  22. null,
  23. null,
  24. ], transitions = [], updateElements = []) {
  25. this._elements = Array.from(elements);
  26. this._data = data;
  27. this._parent = parent;
  28. this._document = document;
  29. this._enter = selections[0];
  30. this._update = selections[1];
  31. this._exit = selections[2];
  32. this._merge = selections[3];
  33. this._split = selections[4];
  34. this._transitions = transitions;
  35. this._facetElements = updateElements;
  36. }
  37. selectAll(selector) {
  38. const elements = typeof selector === 'string'
  39. ? this._parent.querySelectorAll(selector)
  40. : selector;
  41. return new Selection(elements, null, this._elements[0], this._document);
  42. }
  43. selectFacetAll(selector) {
  44. const elements = typeof selector === 'string'
  45. ? this._parent.querySelectorAll(selector)
  46. : selector;
  47. return new Selection(this._elements, null, this._parent, this._document, undefined, undefined, elements);
  48. }
  49. /**
  50. * @todo Replace with querySelector which has bug now.
  51. */
  52. select(selector) {
  53. const element = typeof selector === 'string'
  54. ? this._parent.querySelectorAll(selector)[0] || null
  55. : selector;
  56. return new Selection([element], null, element, this._document);
  57. }
  58. append(node) {
  59. const callback = typeof node === 'function' ? node : () => this.createElement(node);
  60. const elements = [];
  61. if (this._data !== null) {
  62. // For empty selection, append new element to parent.
  63. // Each element is bind with datum.
  64. for (let i = 0; i < this._data.length; i++) {
  65. const d = this._data[i];
  66. const [datum, from] = Array.isArray(d) ? d : [d, null];
  67. const newElement = callback(datum, i);
  68. newElement.__data__ = datum;
  69. if (from !== null)
  70. newElement.__fromElements__ = from;
  71. this._parent.appendChild(newElement);
  72. elements.push(newElement);
  73. }
  74. return new Selection(elements, null, this._parent, this._document);
  75. }
  76. else {
  77. // For non-empty selection, append new element to
  78. // selected element and return new selection.
  79. for (let i = 0; i < this._elements.length; i++) {
  80. const element = this._elements[i];
  81. const datum = element.__data__;
  82. const newElement = callback(datum, i);
  83. element.appendChild(newElement);
  84. elements.push(newElement);
  85. }
  86. return new Selection(elements, null, elements[0], this._document);
  87. }
  88. }
  89. maybeAppend(id, node) {
  90. const element = this._elements[0];
  91. const child = element.getElementById(id);
  92. if (child) {
  93. return new Selection([child], null, this._parent, this._document);
  94. }
  95. const newChild = typeof node === 'string' ? this.createElement(node) : node();
  96. newChild.id = id;
  97. element.appendChild(newChild);
  98. return new Selection([newChild], null, this._parent, this._document);
  99. }
  100. /**
  101. * Bind data to elements, and produce three selection:
  102. * Enter: Selection with empty elements and data to be bind to elements.
  103. * Update: Selection with elements to be updated.
  104. * Exit: Selection with elements to be removed.
  105. */
  106. data(data, id = (d) => d, groupId = () => null) {
  107. // An Array of new data.
  108. const enter = [];
  109. // An Array of elements to be updated.
  110. const update = [];
  111. // A Set of elements to be removed.
  112. const exit = new Set(this._elements);
  113. // An Array of data to be merged into one element.
  114. const merge = [];
  115. // A Set of elements to be split into multiple datum.
  116. const split = new Set();
  117. // A Map from key to each element.
  118. const keyElement = new Map(this._elements.map((d, i) => [id(d.__data__, i), d]));
  119. // A Map from key to exist element. The Update Selection
  120. // can get element from this map, this is for diff among
  121. // facets.
  122. const keyUpdateElement = new Map(this._facetElements.map((d, i) => [id(d.__data__, i), d]));
  123. // A Map from groupKey to a group of elements.
  124. const groupKeyElements = group(this._elements, (d) => groupId(d.__data__));
  125. // Diff data with selection(elements with data).
  126. // !!! Note
  127. // The switch is strictly ordered, not not change the order of them.
  128. for (let i = 0; i < data.length; i++) {
  129. const datum = data[i];
  130. const key = id(datum, i);
  131. const groupKey = groupId(datum, i);
  132. // Append element to update selection if incoming data has
  133. // exactly the same key with elements.
  134. if (keyElement.has(key)) {
  135. const element = keyElement.get(key);
  136. element.__data__ = datum;
  137. element.__facet__ = false;
  138. update.push(element);
  139. exit.delete(element);
  140. keyElement.delete(key);
  141. // Append element to update selection if incoming data has
  142. // exactly the same key with updateElements.
  143. }
  144. else if (keyUpdateElement.has(key)) {
  145. const element = keyUpdateElement.get(key);
  146. element.__data__ = datum;
  147. // Flag this element should update its parentNode.
  148. element.__facet__ = true;
  149. update.push(element);
  150. keyUpdateElement.delete(key);
  151. // Append datum to merge selection if existed elements has
  152. // its key as groupKey.
  153. }
  154. else if (groupKeyElements.has(key)) {
  155. const group = groupKeyElements.get(key);
  156. merge.push([datum, group]);
  157. for (const element of group)
  158. exit.delete(element);
  159. groupKeyElements.delete(key);
  160. // Append element to split selection if incoming data has
  161. // groupKey as its key, and bind to datum for it.
  162. }
  163. else if (keyElement.has(groupKey)) {
  164. const element = keyElement.get(groupKey);
  165. if (element.__toData__)
  166. element.__toData__.push(datum);
  167. else
  168. element.__toData__ = [datum];
  169. split.add(element);
  170. exit.delete(element);
  171. }
  172. else {
  173. // @todo Data with non-unique key.
  174. enter.push(datum);
  175. }
  176. }
  177. // Create new selection with enter, update and exit.
  178. const S = [
  179. new Selection([], enter, this._parent, this._document),
  180. new Selection(update, null, this._parent, this._document),
  181. new Selection(exit, null, this._parent, this._document),
  182. new Selection([], merge, this._parent, this._document),
  183. new Selection(split, null, this._parent, this._document),
  184. ];
  185. return new Selection(this._elements, null, this._parent, this._document, S);
  186. }
  187. merge(other) {
  188. const elements = [...this._elements, ...other._elements];
  189. const transitions = [...this._transitions, ...other._transitions];
  190. return new Selection(elements, null, this._parent, this._document, undefined, transitions);
  191. }
  192. createElement(type) {
  193. if (this._document) {
  194. return this._document.createElement(type, {});
  195. }
  196. const Ctor = Selection.registry[type];
  197. if (Ctor)
  198. return new Ctor();
  199. return error(`Unknown node type: ${type}`);
  200. }
  201. /**
  202. * Apply callback for each selection(enter, update, exit)
  203. * and merge them into one selection.
  204. */
  205. join(enter = (d) => d, update = (d) => d, exit = (d) => d.remove(), merge = (d) => d, split = (d) => d.remove()) {
  206. const newEnter = enter(this._enter);
  207. const newUpdate = update(this._update);
  208. const newExit = exit(this._exit);
  209. const newMerge = merge(this._merge);
  210. const newSplit = split(this._split);
  211. return newUpdate
  212. .merge(newEnter)
  213. .merge(newExit)
  214. .merge(newMerge)
  215. .merge(newSplit);
  216. }
  217. remove() {
  218. // Remove node immediately if there is no transition,
  219. // otherwise wait until transition finished.
  220. for (let i = 0; i < this._elements.length; i++) {
  221. const transition = this._transitions[i];
  222. if (transition) {
  223. const T = Array.isArray(transition) ? transition : [transition];
  224. Promise.all(T.map((d) => d.finished)).then(() => {
  225. const element = this._elements[i];
  226. element.remove();
  227. });
  228. }
  229. else {
  230. const element = this._elements[i];
  231. element.remove();
  232. }
  233. }
  234. return new Selection([], null, this._parent, this._document, undefined, this._transitions);
  235. }
  236. each(callback) {
  237. for (let i = 0; i < this._elements.length; i++) {
  238. const element = this._elements[i];
  239. const datum = element.__data__;
  240. callback.call(element, datum, i);
  241. }
  242. return this;
  243. }
  244. attr(key, value) {
  245. const callback = typeof value !== 'function' ? () => value : value;
  246. return this.each(function (d, i) {
  247. if (value !== undefined)
  248. this[key] = callback.call(this, d, i);
  249. });
  250. }
  251. style(key, value) {
  252. const callback = typeof value !== 'function' ? () => value : value;
  253. return this.each(function (d, i) {
  254. if (value !== undefined)
  255. this.style[key] = callback.call(this, d, i);
  256. });
  257. }
  258. transition(value) {
  259. const callback = typeof value !== 'function' ? () => value : value;
  260. const { _transitions: T } = this;
  261. return this.each(function (d, i) {
  262. T[i] = callback.call(this, d, i);
  263. });
  264. }
  265. on(event, handler) {
  266. this.each(function () {
  267. this.addEventListener(event, handler);
  268. });
  269. return this;
  270. }
  271. call(callback, ...args) {
  272. callback.call(this._parent, this, ...args);
  273. return this;
  274. }
  275. node() {
  276. return this._elements[0];
  277. }
  278. nodes() {
  279. return this._elements;
  280. }
  281. transitions() {
  282. return this._transitions;
  283. }
  284. parent() {
  285. return this._parent;
  286. }
  287. }
  288. Selection.registry = {
  289. g: Group,
  290. rect: Rect,
  291. circle: Circle,
  292. path: Path,
  293. text: Text,
  294. ellipse: Ellipse,
  295. image: Image,
  296. line: Line,
  297. polygon: Polygon,
  298. polyline: Polyline,
  299. html: HTML,
  300. };
  301. //# sourceMappingURL=selection.js.map