treemap.js 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.treemap = exports.getTileMethod = void 0;
  4. var tslib_1 = require("tslib");
  5. var util_1 = require("@antv/util");
  6. var d3Hierarchy = tslib_1.__importStar(require("d3-hierarchy"));
  7. var util_2 = require("./util");
  8. var DEFAULT_OPTIONS = {
  9. field: 'value',
  10. tile: 'treemapSquarify',
  11. size: [1, 1],
  12. round: false,
  13. ignoreParentValue: true,
  14. padding: 0,
  15. paddingInner: 0,
  16. paddingOuter: 0,
  17. paddingTop: 0,
  18. paddingRight: 0,
  19. paddingBottom: 0,
  20. paddingLeft: 0,
  21. as: ['x', 'y'],
  22. // 默认降序
  23. sort: function (a, b) { return b.value - a.value; },
  24. // 纵横比, treemapSquarify 布局时可用,默认黄金分割比例
  25. ratio: 0.5 * (1 + Math.sqrt(5)),
  26. };
  27. function getTileMethod(tile, ratio) {
  28. return tile === 'treemapSquarify' ? d3Hierarchy[tile].ratio(ratio) : d3Hierarchy[tile];
  29. }
  30. exports.getTileMethod = getTileMethod;
  31. function treemap(data, options) {
  32. options = (0, util_1.assign)({}, DEFAULT_OPTIONS, options);
  33. var as = options.as;
  34. if (!(0, util_1.isArray)(as) || as.length !== 2) {
  35. throw new TypeError('Invalid as: it must be an array with 2 strings (e.g. [ "x", "y" ])!');
  36. }
  37. var field;
  38. try {
  39. field = (0, util_2.getField)(options);
  40. }
  41. catch (e) {
  42. console.warn(e);
  43. }
  44. var tileMethod = getTileMethod(options.tile, options.ratio);
  45. var partition = function (data) {
  46. return d3Hierarchy
  47. .treemap()
  48. .tile(tileMethod)
  49. .size(options.size)
  50. .round(options.round)
  51. .padding(options.padding)
  52. .paddingInner(options.paddingInner)
  53. .paddingOuter(options.paddingOuter)
  54. .paddingTop(options.paddingTop)
  55. .paddingRight(options.paddingRight)
  56. .paddingBottom(options.paddingBottom)
  57. .paddingLeft(options.paddingLeft)(
  58. /**
  59. * d3Hierarchy 布局中需指定 sum 函数计算 node 值,规则是:从当前 node 开始以 post-order traversal 的次序为当前节点以及每个后代节点调用指定的 value 函数,并返回当前 node。
  60. * for example:
  61. * { node: 'parent', value: 10, children: [{node: 'child1', value: 5}, {node: 'child2', value: 5}, ]}
  62. * parent 所得的计算值是 sum(node(parent)) + sum(node(child1)) + sum(node(child2))
  63. * ignoreParentValue 为 true(默认) 时,父元素的值由子元素累加而来,该值为 0 + 5 + 5 = 10
  64. * ignoreParentValue 为 false 时,父元素的值由当前节点 及子元素累加而来,该值为 10 + 5 + 5 = 20
  65. * sum 函数中,d 为用户传入的 data, children 为保留字段
  66. */
  67. d3Hierarchy
  68. .hierarchy(data)
  69. .sum(function (d) { return (options.ignoreParentValue && d.children ? 0 : d[field]); })
  70. .sort(options.sort));
  71. };
  72. var root = partition(data);
  73. /*
  74. * points:
  75. * 3 2
  76. * 0 1
  77. */
  78. var x = as[0];
  79. var y = as[1];
  80. root.each(function (node) {
  81. node[x] = [node.x0, node.x1, node.x1, node.x0];
  82. node[y] = [node.y1, node.y1, node.y0, node.y0];
  83. ['x0', 'x1', 'y0', 'y1'].forEach(function (prop) {
  84. if (as.indexOf(prop) === -1) {
  85. delete node[prop];
  86. }
  87. });
  88. });
  89. return (0, util_2.getAllNodes)(root);
  90. }
  91. exports.treemap = treemap;
  92. //# sourceMappingURL=treemap.js.map