diff --git a/__tests__/data/treemap.ts b/__tests__/data/treemap.ts index 2156011c9c..345d485e74 100644 --- a/__tests__/data/treemap.ts +++ b/__tests__/data/treemap.ts @@ -1,8 +1,8 @@ export const TREEMAP = { name: 'root', children: [ - { name: '分类 1', value: 560, ext: '自定义数据' }, - { name: '分类 2', value: 500, ext: '自定义数据' }, + { name: '分类 1', value: 500, ext: '自定义数据' }, + { name: '分类 2', value: 800, ext: '自定义数据' }, { name: '分类 3', value: 150, ext: '自定义数据' }, { name: '分类 4', value: 140, ext: '自定义数据' }, { name: '分类 5', value: 115, ext: '自定义数据' }, diff --git a/__tests__/unit/plots/sunburst/index-spec.ts b/__tests__/unit/plots/sunburst/index-spec.ts index 25dc1a042e..10f5a9f0cf 100644 --- a/__tests__/unit/plots/sunburst/index-spec.ts +++ b/__tests__/unit/plots/sunburst/index-spec.ts @@ -146,7 +146,7 @@ describe('sunburst', () => { sunburstPlot.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY }); expect( document.getElementById('sunburst-id-one').getElementsByClassName('g2-tooltip-list-item-value')[0].innerHTML - ).toBe('0.0153'); + ).toBe('0.0211'); sunburstPlot.chart.hideTooltip(); sunburstPlot.destroy(); diff --git a/__tests__/unit/plots/treemap/color-spec.ts b/__tests__/unit/plots/treemap/color-spec.ts index 5970654031..f2bd221815 100644 --- a/__tests__/unit/plots/treemap/color-spec.ts +++ b/__tests__/unit/plots/treemap/color-spec.ts @@ -95,7 +95,7 @@ describe('treemap color', () => { }); const elements = treemapPlot.chart.geometries[0].elements; - expect(elements[0].model.color).toBe('#f00'); + expect(elements[1].model.color).toBe('#f00'); expect(elements[5].model.color).toBe('#0f0'); }); diff --git a/__tests__/unit/plots/treemap/interactions/treemap-drill-down-spec.ts b/__tests__/unit/plots/treemap/interactions/treemap-drill-down-spec.ts index eb5980344e..59cbbda904 100644 --- a/__tests__/unit/plots/treemap/interactions/treemap-drill-down-spec.ts +++ b/__tests__/unit/plots/treemap/interactions/treemap-drill-down-spec.ts @@ -98,8 +98,8 @@ describe('drill-down intera', () => { // @ts-ignore const nowData = treemapPlot.chart.getData(); expect(nowData.length).toBe(2); - expect(nowData[0].name).toBe('东欧'); - expect(nowData[1].name).toBe('西欧'); + expect(nowData[0].name).toBe('西欧'); + expect(nowData[1].name).toBe('东欧'); expect(nowData[0].y).toEqual([1, 1, 0, 0]); expect(nowData[1].y).toEqual([1, 1, 0, 0]); diff --git a/__tests__/unit/plots/treemap/lable-spec.ts b/__tests__/unit/plots/treemap/lable-spec.ts index 7dbcc4ed8a..2c57174c92 100644 --- a/__tests__/unit/plots/treemap/lable-spec.ts +++ b/__tests__/unit/plots/treemap/lable-spec.ts @@ -33,7 +33,7 @@ describe('treemap basic', () => { // @ts-ignore expect(treemapPlot.chart.geometries[0].labelOption.cfg.position).toEqual('top'); expect(treemapPlot.chart.geometries[0].labelsContainer.getChildren()[0].cfg.children[0].attrs.text).toBe( - TREEMAP.children[0].name + TREEMAP.children[0].ext + '分类 2自定义数据' ); // label with custom diff --git a/__tests__/unit/plots/treemap/sort-spec.ts b/__tests__/unit/plots/treemap/sort-spec.ts new file mode 100644 index 0000000000..562b2bdcd4 --- /dev/null +++ b/__tests__/unit/plots/treemap/sort-spec.ts @@ -0,0 +1,30 @@ +import { Treemap } from '../../../../src'; +import { createDiv } from '../../../utils/dom'; +import { TREEMAP } from '../../../data/treemap'; + +describe('treemap sort', () => { + it('treemap sort', () => { + const treemapPlot = new Treemap(createDiv(), { + data: TREEMAP, + colorField: 'name', + }); + + treemapPlot.render(); + + // 1. 图形经过排序 + // @ts-ignore + expect(treemapPlot.chart.geometries[0].elements[0].getModel().data.name).toBe('分类 2'); + // @ts-ignore + expect(treemapPlot.chart.geometries[0].elements[0].getModel().data.value).toBe(800); + // @ts-ignore + expect(treemapPlot.chart.geometries[0].elements[1].getModel().data.name).toBe('分类 1'); + // @ts-ignore + expect(treemapPlot.chart.geometries[0].elements[1].getModel().data.value).toBe(500); + + // 2. reflect y + // @ts-ignore + expect(treemapPlot.chart.getCoordinate().isReflectY).toBe(true); + + treemapPlot.destroy(); + }); +}); diff --git a/__tests__/unit/plots/treemap/tooltip-spec.ts b/__tests__/unit/plots/treemap/tooltip-spec.ts index 8c65ab3a57..5c6dc125e0 100644 --- a/__tests__/unit/plots/treemap/tooltip-spec.ts +++ b/__tests__/unit/plots/treemap/tooltip-spec.ts @@ -25,7 +25,7 @@ describe('treemap tooltip', () => { expect(tooltipOption.showMarkers).toBe(false); expect(tooltipOption.showTitle).toBe(false); expect(tooltipOption.fields).toEqual(['name', 'value', 'name']); - expect(tooltipOption.formatter(TREEMAP.children[0])).toEqual({ name: '分类 1', value: 560 }); + expect(tooltipOption.formatter(TREEMAP.children[0])).toEqual({ name: '分类 1', value: 500 }); }); it('treemap tooltip custom', () => { diff --git a/__tests__/unit/plots/treemap/utils-spec.ts b/__tests__/unit/plots/treemap/utils-spec.ts index ca96b81f3e..99a2d79595 100644 --- a/__tests__/unit/plots/treemap/utils-spec.ts +++ b/__tests__/unit/plots/treemap/utils-spec.ts @@ -151,6 +151,9 @@ describe('treemap transformData', () => { data: data2, colorField: 'name', openDrillDown: false, + hierarchyConfig: { + sort: () => 1, + }, }); const areaArr = data.map((dt) => { diff --git a/src/plots/treemap/adaptor.ts b/src/plots/treemap/adaptor.ts index e014153a3f..a7a1adefb2 100644 --- a/src/plots/treemap/adaptor.ts +++ b/src/plots/treemap/adaptor.ts @@ -81,6 +81,9 @@ function geometry(params: Params): Params { }) ); + // 做一个反转,这样配合排序,可以将最大值放到左上角,最小值放到右下角 + chart.coordinate().reflect('y'); + return params; } diff --git a/src/utils/hierarchy/treemap.ts b/src/utils/hierarchy/treemap.ts index 3253ade953..b31dd94972 100644 --- a/src/utils/hierarchy/treemap.ts +++ b/src/utils/hierarchy/treemap.ts @@ -17,6 +17,8 @@ const DEFAULT_OPTIONS: HierarchyOption = { paddingBottom: 0, paddingLeft: 0, as: ['x', 'y'], + // 默认降序 + sort: (a, b) => b.value - a.value, }; export function treemap(data: any, options: HierarchyOption): any[] { @@ -55,7 +57,10 @@ export function treemap(data: any, options: HierarchyOption): any[] { * ignoreParentValue 为 false 时,父元素的值由当前节点 及子元素累加而来,该值为 10 + 5 + 5 = 20 * sum 函数中,d 为用户传入的 data, children 为保留字段 */ - d3Hierarchy.hierarchy(data).sum((d) => (options.ignoreParentValue && d.children ? 0 : d[field])) + d3Hierarchy + .hierarchy(data) + .sum((d) => (options.ignoreParentValue && d.children ? 0 : d[field])) + .sort(options.sort) ); const root = partition(data); diff --git a/src/utils/hierarchy/types.ts b/src/utils/hierarchy/types.ts index 1293a35b8b..ab11578bca 100644 --- a/src/utils/hierarchy/types.ts +++ b/src/utils/hierarchy/types.ts @@ -23,4 +23,5 @@ export interface HierarchyOption { paddingBottom?: number; paddingLeft?: number; as: [string, string]; + sort?(a: any, b: any): number; }