feat: 优化了index文本配置方式

demoV2/Layouter/AdjoinMatrixGraph.js

@@ -0,0 +1,128 @@
+
+const isNeighbor = function (itemA, itemB) {
+    let neighborA = itemA.neighbor,
+        neighborB = itemB.neighbor;
+
+    if (neighborA === undefined && neighborB === undefined) {
+        return false;
+    }
+
+    if (neighborA && neighborA.includes(itemB.id)) {
+        return true;
+    }
+
+    if (neighborB && neighborB.includes(itemA.id)) {
+        return true;
+    }
+
+    return false;
+}
+
+
+SV.registerLayouter('AdjoinMatrixGraph', {
+
+    sourcesPreprocess(sources) {
+        let dataLength = sources.length;
+        let matrixNodeLength = dataLength * dataLength;
+        let matrixNodes = [];
+        let i, j;
+
+        for (i = 0; i < matrixNodeLength; i++) {
+            matrixNodes.push({
+                id: `mn-${i}`,
+                type: 'matrixNode',
+                indexTop: i < dataLength ? sources[i].id : undefined,
+                indexLeft: i % dataLength === 0?  sources[i / dataLength].id : undefined,
+                data: 0
+            });
+        }
+
+        for (i = 0; i < dataLength; i++) {
+            for (j = 0; j < dataLength; j++) {
+                let itemI = sources[i],
+                    itemJ = sources[j];
+
+                if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
+                    matrixNodes[i * dataLength + j].data = 1;
+                }
+            }
+        }
+
+        sources.push(...matrixNodes);
+
+        return sources;
+    },
+
+    defineOptions() {
+        return {
+            element: {
+                default: {
+                    type: 'circle',
+                    label: '[id]',
+                    size: 40,
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                },
+                matrixNode: {
+                    type: 'indexed-node',
+                    label: '[data]',
+                    size: [40, 40],
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    },
+                    indexOptions: {
+                        indexTop: { position: 'top' },
+                        indexLeft: { position: 'left' }
+                    }
+                }
+            },
+            link: {
+                neighbor: {
+                    style: {
+                        stroke: '#333'
+                    }
+                }
+            },
+            layout: {
+                radius: 150,
+                interval: 250
+            },
+            behavior: {
+                dragNode: ['default']
+            }
+        };
+    },
+
+    layout(elements, layoutOptions) {
+        let nodes = elements.filter(item => item.type === 'default'),
+            matrixNodes = elements.filter(item => item.type === 'matrixNode'),
+            nodeLength = nodes.length,
+            matrixNodeLength = matrixNodes.length,
+            { interval, radius } = layoutOptions,
+            intervalAngle = 2 * Math.PI / nodes.length,
+            matrixNodeSize = matrixNodes[0].get('size')[0],
+            i;
+
+        const matrixY = -radius,
+              matrixX = interval;
+
+        for (i = 0; i < nodeLength; i++) {
+            let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
+
+            nodes[i].set({ x, y });
+        }
+
+        for (i = 0; i < matrixNodeLength; i++) {
+            let x = matrixX + (i % nodeLength) * matrixNodeSize;
+                y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
+
+            matrixNodes[i].set({ x, y });
+        }
+    }
+});
+
+
+

demoV2/Layouter/AdjoinTableGraph.js

@@ -0,0 +1,236 @@
+
+
+
+SV.registerLayouter('AdjoinTableGraph', {
+
+    sourcesPreprocess(sources, options) {
+        let dataLength = sources.length;
+        let tableHeadNodes = [];
+        let nodeMap = {};
+        let i;
+        
+
+        for (i = 0; i < dataLength; i++) {
+            let graphNode = sources[i];
+
+            tableHeadNodes.push({
+                id: `table-head-node-${i}`,
+                type: 'tableHeadNode',
+                data: graphNode.id
+            });
+
+            nodeMap[graphNode.id] = {
+                node: graphNode,
+                order: i,
+                neighbor: []
+            };
+        }
+
+        Object.keys(nodeMap).map(key => {
+            let nodeData = nodeMap[key],
+                neighbor = nodeData.node.neighbor;
+
+            if (neighbor === undefined) {
+                return;
+            }
+
+            neighbor.forEach((item, index) => {
+                let targetNodeData = nodeMap[item];
+
+                nodeData.neighbor.push({
+                    id: `${key}-table-node-${item}`,
+                    type: 'tableNode',
+                    data: item.toString(),
+                    order: targetNodeData.order
+                });
+
+                targetNodeData.neighbor.push({
+                    id: `${item}-table-node-${key}`,
+                    type: 'tableNode',
+                    data: key.toString(),
+                    order: nodeData.order
+                });
+            });
+
+            Object.keys(nodeMap).map(key => {
+                let nodeData = nodeMap[key],
+                    neighbor = nodeData.neighbor;
+
+                if (neighbor === undefined) {
+                    return;
+                }
+
+                neighbor.sort((n1, n2) => {
+                    return n1.order - n2.order;
+                });
+
+                for(let i = 0; i < neighbor.length; i++) {
+                    if(neighbor[i + 1]) {
+                        neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
+                    }
+                }
+            });
+
+            tableHeadNodes.forEach(item => {
+                let nodeData = nodeMap[item.data],
+                    neighbor = nodeData.neighbor;
+
+                if(neighbor.length) {
+                    item.headNext = `tableNode#${neighbor[0].id}`;
+                }
+            });
+        });
+
+        sources.push(...tableHeadNodes);
+        Object.keys(nodeMap).map(key => {
+            let nodeData = nodeMap[key],
+                neighbor = nodeData.neighbor;
+            
+            sources.push(...neighbor);
+        });
+
+        return sources;
+    },
+
+    defineOptions() {
+        return {
+            element: {
+                default: {
+                    type: 'circle',
+                    label: '[id]',
+                    size: 40,
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                },
+                tableHeadNode: {
+                    type: 'two-cell-node',
+                    label: '[data]',
+                    size: [70, 40],
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                },
+                tableNode: {
+                    type: 'link-list-node',
+                    label: '[data]',
+                    size: [60, 30],
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                }
+            },
+            link: {
+                neighbor: {
+                    style: {
+                        stroke: '#333'
+                    }
+                },
+                headNext: { 
+                    sourceAnchor: 1,
+                    targetAnchor: 6,
+                    style: {
+                        stroke: '#333',
+                        endArrow: {
+                            path: G6.Arrow.triangle(8, 6, 0), 
+                            fill: '#333'
+                        },
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1), 
+                            fill: '#333'
+                        }
+                    }
+                },
+                next: {
+                    sourceAnchor: 2,
+                    targetAnchor: 6,
+                    style: {
+                        stroke: '#333',
+                        endArrow: {
+                            path: G6.Arrow.triangle(8, 6, 0), 
+                            fill: '#333'
+                        },
+                        startArrow: {
+                            path: G6.Arrow.circle(2, -1), 
+                            fill: '#333'
+                        }
+                    }
+                }
+            },
+            layout: {
+                radius: 150,
+                interval: 250,
+                xInterval: 50,
+                yInterval: 50
+            },
+            behavior: {
+                dragNode: ['default', 'tableNode']
+            }
+        };
+    },
+
+    /**
+     * 对子树进行递归布局
+     * @param node 
+     * @param parent 
+     */
+     layoutItem(node, prev, layoutOptions) {
+        if(!node) {
+            return null;
+        }
+
+        let width = node.get('size')[0];
+
+        if(prev) {
+            node.set('y', prev.get('y'));
+            node.set('x', prev.get('x') + layoutOptions.xInterval + width);
+        }
+
+        if(node.next) {
+            this.layoutItem(node.next, node, layoutOptions);
+        }
+    },  
+
+    layout(elements, layoutOptions) {
+        let nodes = elements.filter(item => item.type === 'default'),
+            tableHeadNode = elements.filter(item => item.type === 'tableHeadNode'),
+            nodeLength = nodes.length,
+            { radius } = layoutOptions,
+            intervalAngle = 2 * Math.PI / nodes.length,
+            i;
+
+        for (i = 0; i < nodeLength; i++) {
+            let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
+
+            nodes[i].set({ x, y });
+        }
+
+        const tableY = -radius,
+              tableX = radius + 20;
+
+        for(i = 0; i < tableHeadNode.length; i++) {
+            let node = tableHeadNode[i],
+                height = node.get('size')[1];
+
+            node.set({
+                x: tableX,
+                y: tableY + node.get('y') + i * height
+            });
+
+            if(node.headNext) {
+                let y = node.get('y') + height - node.headNext.get('size')[1],
+                    x = tableX + layoutOptions.xInterval * 2.5;
+
+                node.headNext.set({ x, y });
+                this.layoutItem(node.headNext, null, layoutOptions);
+            }
+        }
+
+    }
+});
+
+
+

demoV2/Layouter/Array.js

@@ -19,11 +19,15 @@ SV.registerLayouter('Array', {
             element: { 
                 default: {
                     type: 'indexed-node',
-                    label: '[data]',
+                    label: '[id]',
                     size: [60, 30],
                     style: {
                         stroke: '#333',
                         fill: '#95e1d3'
+                    },
+                    indexOptions: {
+                        index: { position: 'bottom' },
+                        indexTop: { position: 'top' }
                     }
                 }
             },

demoV2/Layouter/ChainHashTable.js

@@ -130,4 +130,3 @@ SV.registerLayouter('ChainHashTable', {
 
 
 
-

demoV2/Layouter/Stack.js

@@ -10,12 +10,6 @@ SV.registerLayouter('Stack', {
             delete stackBottomNode.external;
         }
 
-        if(options.layout.indexPosition) {
-            sources.forEach(item => {
-                item.indexPosition = options.layout.indexPosition;
-            });
-        }
-
         return sources;
     },
 
@@ -55,9 +49,6 @@ SV.registerLayouter('Stack', {
                     }
                 }
             },
-            layout: {
-                indexPosition: 'left'
-            },
             behavior: {
                 dragNode: false
             }

demoV2/demo2.html

@@ -75,6 +75,8 @@
     <script src="./Layouter/Array.js"></script>
     <script src="./Layouter/HashTable.js"></script>
     <script src="./Layouter/LinkStack.js"></script>
+    <script src="./Layouter/AdjoinMatrixGraph.js"></script>
+    <script src="./Layouter/AdjoinTableGraph.js"></script>
     <script>
 
 
@@ -88,35 +90,20 @@
 
 
         let data = [{
-            "LinkStack1": {
+            "g1": {
                 "data": [
-                    {
+                    { id: 0, neighbor: [4, 3] }, { id: 1, neighbor: [0, 3] }, { id: 2, neighbor: [4, 0] },
-                        "id": 0,
+                    { id: 3, neighbor: [5, 2] }, { id: 4 },
-                        external: 'gg'
+                    { id: 5, neighbor: [0, 1] }
-                    }
                 ],
-                "layouter": "LinkStack"
+                // "layouter": "AdjoinTableGraph"
-            }
+                "layouter": "AdjoinMatrixGraph"
-        }, {
-            "LinkStack1": {
-                "data": [
-                    {
-                        "id": 0
-                    },
-                    {
-                        "id": 1,
-                        "freed": true,
-                    },
-                    {
-                        "freed": true,
-                        "id": 2
-                    }
-                ],
-                "layouter": "LinkStack"
             }
         }];
 
         
+
+
         let dataIndex = 0,
             curData = data[dataIndex];
 

src/Model/modelConstructor.ts

@@ -1,6 +1,6 @@
 import { Util } from "../Common/util";
 import { Engine } from "../engine";
-import { ElementOption, Layouter, LayoutGroupOptions, LinkOption, MarkerOption } from "../options";
+import { ElementIndexOption, ElementOption, Layouter, LayoutGroupOptions, LinkOption, MarkerOption } from "../options";
 import { sourceLinkData, SourceElement, LinkTarget, Sources } from "../sources";
 import { SV } from "../StructV";
 import { Element, Link, Marker, Model } from "./modelData";
@@ -29,7 +29,7 @@ export class ModelConstructor {
 
     constructor(engine: Engine) {
         this.engine = engine;
-        this.prevSourcesStringMap = { };
+        this.prevSourcesStringMap = {};
     }
 
     /**
@@ -46,7 +46,7 @@ export class ModelConstructor {
                 layouterName = sourceGroup.layouter,
                 layouter: Layouter = layouterMap[sourceGroup.layouter];
 
-            if(!layouterName || !layouter) {
+            if (!layouterName || !layouter) {
                 return;
             }
 
@@ -55,14 +55,14 @@ export class ModelConstructor {
                 elementList: Element[] = [],
                 markerList: Marker[] = [];
 
-            if(prevString === sourceDataString) {
+            if (prevString === sourceDataString) {
                 return;
             }
 
             const options: LayoutGroupOptions = optionsTable[layouterName],
                 sourceData = layouter.sourcesPreprocess(sourceGroup.data, options),
-                  elementOptions = options.element || { },
+                elementOptions = options.element || {},
-                  markerOptions = options.marker || { };
+                markerOptions = options.marker || {};
 
             elementList = this.constructElements(elementOptions, name, sourceData, layouterName);
             markerList = this.constructMarkers(name, markerOptions, elementList);
@@ -81,7 +81,7 @@ export class ModelConstructor {
         });
 
         layoutGroupTable.forEach((layoutGroup: LayoutGroup) => {
-            const linkOptions = layoutGroup.options.link || { },
+            const linkOptions = layoutGroup.options.link || {},
                 linkList: Link[] = this.constructLinks(linkOptions, layoutGroup.element, layoutGroupTable);
 
             layoutGroup.link = linkList;
@@ -114,11 +114,11 @@ export class ModelConstructor {
             elementList: Element[] = [];
 
         sourceList.forEach(item => {
-            if(item === null) {
+            if (item === null) {
                 return;
             }
 
-            if(item.type === undefined || item.type === null) {
+            if (item.type === undefined || item.type === null) {
                 item.type = defaultElementType;
             }
 
@@ -140,41 +140,41 @@ export class ModelConstructor {
             linkNames = Object.keys(linkOptions);
 
         linkNames.forEach(name => {
-            for(let i = 0; i < elements.length; i++) {
+            for (let i = 0; i < elements.length; i++) {
                 let element: Element = elements[i],
                     sourceLinkData: sourceLinkData = element.sourceElement[name],
                     targetElement: Element | Element[] = null,
                     link: Link = null;
 
-                if(sourceLinkData === undefined || sourceLinkData === null) {
+                if (sourceLinkData === undefined || sourceLinkData === null) {
                     element[name] = null;
                     continue;
                 }
 
                 //  ------------------- 将连接声明字段 sourceLinkData 从 id 变为 Element -------------------
-                if(Array.isArray(sourceLinkData)) {
+                if (Array.isArray(sourceLinkData)) {
                     element[name] = sourceLinkData.map((item, index) => {
                         targetElement = this.fetchTargetElements(layoutGroupTable, element, item);
                         let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
 
-                        if(targetElement) {
+                        if (targetElement) {
                             link = this.createLink(name, element, targetElement, index, linkOptions[name]);
                             linkList.push(link);
                         }
 
-                        return isGeneralLink? targetElement: null;
+                        return isGeneralLink ? targetElement : null;
                     });
                 }
                 else {
                     targetElement = this.fetchTargetElements(layoutGroupTable, element, sourceLinkData);
                     let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
 
-                    if(targetElement) {
+                    if (targetElement) {
                         link = this.createLink(name, element, targetElement, null, linkOptions[name]);
                         linkList.push(link);
                     }
 
-                    element[name] = isGeneralLink? targetElement: null;
+                    element[name] = isGeneralLink ? targetElement : null;
                 }
             }
         });
@@ -193,14 +193,14 @@ export class ModelConstructor {
             markerNames = Object.keys(markerOptions);
 
         markerNames.forEach(name => {
-            for(let i = 0; i < elements.length; i++) {
+            for (let i = 0; i < elements.length; i++) {
                 let element = elements[i],
                     markerData = element[name];
 
                 // 若没有指针字段的结点则跳过
-                if(!markerData) continue;
+                if (!markerData) continue;
 
-                let id = `${groupName}.${name}.${Array.isArray(markerData)? markerData.join('-'): markerData}`,
+                let id = `${groupName}.${name}.${Array.isArray(markerData) ? markerData.join('-') : markerData}`,
                     marker = this.createMarker(id, name, markerData, element, markerOptions[name]);
 
                 markerList.push(marker);
@@ -210,6 +210,44 @@ export class ModelConstructor {
         return markerList;
     }
 
+    /**
+     * 求解label文本
+     * @param label 
+     * @param sourceElement 
+     */
+    private resolveElementLabel(label: string | string[], sourceElement: SourceElement): string {
+        let targetLabel: any = '';
+
+        if (Array.isArray(label)) {
+            targetLabel = label.map(item => this.parserElementContent(sourceElement, item) ?? '');
+        }
+        else {
+            targetLabel = this.parserElementContent(sourceElement, label);
+        }
+
+        if(targetLabel === 'undefined') {
+            targetLabel = '';
+        }
+
+        return targetLabel ?? '';
+    }
+
+    /**
+     * 求解index文本
+     * @param indexOptions 
+     * @param sourceElement 
+     */
+    private resolveElementIndex(indexOptions: ElementIndexOption, sourceElement: SourceElement) {
+        if(indexOptions === undefined || indexOptions === null) {
+            return;
+        }
+
+        Object.keys(indexOptions).map(key => {
+            let indexOptionItem = indexOptions[key];
+            indexOptionItem.value = sourceElement[key] ?? '';
+        });
+    }
+
     /**
      * 元素工厂，创建Element
      * @param sourceElement
@@ -220,34 +258,17 @@ export class ModelConstructor {
      */
     private createElement(sourceElement: SourceElement, elementName: string, groupName: string, layouterName: string, options: ElementOption): Element {
         let element: Element = undefined,
-            label: string | string[] = '',
+            label: string | string[] = this.resolveElementLabel(options.label, sourceElement),
             id = elementName + '.' + sourceElement.id.toString();
 
-        if(options.label) {
-            if(Array.isArray(options.label)) {
-                label = options.label.map(item => {
-                    let res = this.parserElementContent(sourceElement, item);
-
-                    if(res === null || label === 'undefined') {
-                        return '';
-                    }
-
-                    return res;
-                });
-            }
-            else {
-                label = this.parserElementContent(sourceElement, options.label);
-
-                if(label === null || label === 'undefined') {
-                    label = '';
-                }
-            }
-        }
 
         element = new Element(id, elementName, groupName, layouterName, sourceElement);
         element.initProps(options);
         element.set('label', label);
         element.sourceElement = sourceElement;
+        // 处理element的index文本
+        this.resolveElementIndex(element.get('indexCfg'), sourceElement);
+        console.log(element.get('indexCfg'));
 
         return element;
     }
@@ -295,7 +316,7 @@ export class ModelConstructor {
     private parserElementContent(sourceElement: SourceElement, formatLabel: string): string {
         let fields = Util.textParser(formatLabel);
 
-        if(Array.isArray(fields)) {
+        if (Array.isArray(fields)) {
             let values = fields.map(item => sourceElement[item]);
 
             values.map((item, index) => {
@@ -320,11 +341,11 @@ export class ModelConstructor {
             targetGroupName = groupName,
             targetElement = null;
 
-        if(linkTarget === null || linkTarget === undefined) {
+        if (linkTarget === null || linkTarget === undefined) {
             return null;
         }
 
-        if(typeof linkTarget === 'number' || (typeof linkTarget === 'string' && !linkTarget.includes('#'))) {
+        if (typeof linkTarget === 'number' || (typeof linkTarget === 'string' && !linkTarget.includes('#'))) {
             linkTarget = 'default#' + linkTarget;
         }
 
@@ -332,16 +353,16 @@ export class ModelConstructor {
 
         targetId = info.pop();
 
-        if(info.length > 1) {
+        if (info.length > 1) {
             elementName = info.pop();
             targetGroupName = info.pop();
         }
         else {
             let field = info.pop();
-            if(layoutGroupTable.get(targetGroupName).element.find(item => item.type === field)) {
+            if (layoutGroupTable.get(targetGroupName).element.find(item => item.type === field)) {
                 elementName = field;
             }
-            else if(layoutGroupTable.has(field)) {
+            else if (layoutGroupTable.has(field)) {
                 targetGroupName = field;
             }
             else {
@@ -352,7 +373,7 @@ export class ModelConstructor {
         elementList = layoutGroupTable.get(targetGroupName).element.filter(item => item.type === elementName);
 
         // 若目标element不存在，返回null
-        if(elementList === undefined) {
+        if (elementList === undefined) {
             return null;
         }
 
@@ -367,8 +388,8 @@ export class ModelConstructor {
     private isGeneralLink(linkId: string): boolean {
         let counter = 0;
 
-        for(let i = 0; i < linkId.length; i++) {
+        for (let i = 0; i < linkId.length; i++) {
-            if(linkId[i] === '#') {
+            if (linkId[i] === '#') {
                 counter++;
             }
         }

src/Model/modelData.ts

@@ -1,5 +1,5 @@
 import { Util } from "../Common/util";
-import { ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, MarkerOption, Style } from "../options";
+import { ElementIndexOption, ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, MarkerOption, Style } from "../options";
 import { SourceElement } from "../sources";
 import { BoundingRect } from "../Common/boundingRect";
 import { SV } from './../StructV';
@@ -16,6 +16,7 @@ export interface G6NodeModel {
     label: string | string[];
     style: Style;
     labelCfg: ElementLabelOption;
+    indexCfg?: ElementIndexOption;
     markerId: string; 
     SVLayouter: string;
     SVModelType: string;
@@ -211,6 +212,7 @@ export class Element extends Model {
             label: option.label,
             style: Util.objectClone<Style>(option.style),
             labelCfg: Util.objectClone<ElementLabelOption>(option.labelOptions),
+            indexCfg: Util.objectClone<ElementIndexOption>(option.indexOptions),
             markerId: null,
             SVLayouter: this.layouterName,
             SVModelType: 'element',

src/RegisteredShape/indexedNode.ts

@@ -7,7 +7,7 @@ export default G6.registerNode('indexed-node', {
 
         const width = cfg.size[0],
             height = cfg.size[1],
-              disable = cfg.disable === undefined? false: cfg.disable;
+            disable = cfg.disable === undefined ? false : cfg.disable;
 
         const rect = group.addShape('rect', {
             attrs: {
@@ -16,7 +16,7 @@ export default G6.registerNode('indexed-node', {
                 width: width,
                 height: height,
                 stroke: cfg.style.stroke || '#333',
-                fill: disable? '#ccc': cfg.style.fill,
+                fill: disable ? '#ccc' : cfg.style.fill,
                 cursor: cfg.style.cursor,
             },
             name: 'wrapper'
@@ -38,18 +38,20 @@ export default G6.registerNode('indexed-node', {
             });
         }
 
-        if(cfg.index !== undefined) {
+        const indexCfg = cfg.indexCfg;
-            const offset = 20,
+        const offset = 20;
-                  indexPosition = cfg.indexPosition || 'bottom',
+        const indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
-                  indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
             top: (width: number, height: number) => ({ x: width, y: height / 2 - offset }),
             right: (width: number, height: number) => ({ x: width * 1.5 + offset, y: height }),
             bottom: (width: number, height: number) => ({ x: width, y: height * 1.5 + offset }),
             left: (width: number, height: number) => ({ x: width / 2 - offset, y: height })
         };
 
-            const { x: indexX, y: indexY } = indexPositionMap[indexPosition](width, height);
+        if (indexCfg !== undefined) {
-
+            Object.keys(indexCfg).map(key => {
+                let indexCfgItem = indexCfg[key];
+                let position = indexCfgItem.position || 'bottom';
+                let { x: indexX, y: indexY } = indexPositionMap[position](width, height);
 
                 group.addShape('text', {
                     attrs: {
@@ -57,13 +59,15 @@ export default G6.registerNode('indexed-node', {
                         y: indexY,
                         textAlign: 'center',
                         textBaseline: 'middle',
-                    text: cfg.index.toString(),
+                        text: indexCfgItem.value.toString(),
                         fill: '#bbb',
                         fontSize: 14,
-                    fontStyle: 'italic'
+                        fontStyle: 'italic',
+                        ...indexCfgItem.style
                     },
                     name: 'index-text'
                 });
+            });
         }
 
         return rect;

src/options.ts

@@ -22,6 +22,13 @@ export interface ElementLabelOption {
 };
 
 
+export interface ElementIndexOption extends ElementLabelOption {
+    position: 'top' | 'right' | 'bottom' | 'left';
+    value: string;
+    style: Style;
+}
+
+
 export interface LinkLabelOption {
     refX: number;
     refY: number;
@@ -39,6 +46,7 @@ export interface ElementOption {
     anchorPoints: [number, number];
     label: string | string[];
     labelOptions: ElementLabelOption;
+    indexOptions: ElementIndexOption;
     style: Style;
 }