feat: add treeGraph mark

__tests__/integration/charts/flare-tree-custom.ts

@@ -0,0 +1,34 @@
+import { G2Spec } from '../../../src';
+
+export async function flareTreeCustom(): Promise<G2Spec> {
+  return {
+    width: 800,
+    height: 1500,
+    type: 'tree',
+    coordinate: [{ type: 'transpose' }],
+    layout: {
+      sortBy: (a, b) => a.value - b.value,
+    },
+    data: {
+      type: 'fetch',
+      value: 'data/flare.json',
+    },
+    encode: {
+      linkShape: 'vhv',
+    },
+    style: {
+      // node style.
+      nodeFill: (d) => (d.height === 0 ? '#999' : '#000'),
+      // link style.
+      linkStroke: '#999',
+      // label style.
+      labelText: (d) => d.data.name || '-',
+      labelFontSize: (d) => (d.height === 0 ? 7 : 12),
+      labelTextAlign: (d) => (d.height === 0 ? 'start' : 'end'),
+      labelPosition: (d) => (d.height !== 0 ? 'left' : 'right'),
+      labelDx: (d) => (d.height === 0 ? 5 : -5),
+      labelBackground: true,
+      labelBackgroundFill: '#fff',
+    },
+  };
+}

__tests__/integration/charts/flare-tree-default.ts

@@ -0,0 +1,14 @@
+import { G2Spec } from '../../../src';
+
+export async function flareTreeDefault(): Promise<G2Spec> {
+  return {
+    width: 800,
+    height: 800,
+    type: 'tree',
+    coordinate: [{ type: 'transpose' }],
+    data: {
+      type: 'fetch',
+      value: 'data/flare.json',
+    },
+  };
+}

__tests__/integration/charts/index.ts

@@ -127,3 +127,5 @@ export { incomePointCircle } from './income-point-circle';
 export { miserableForceDefault } from './miserable-force-default';
 export { miserableForceCustom } from './miserable-force-custom';
 export { weatherLineMultiAxes } from './weather-line-multi-axes';
+export { flareTreeDefault } from './flare-tree-default';
+export { flareTreeCustom } from './flare-tree-custom';