From c710a9c8ca3325bee4cbd43900c83113b756843d Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Mon, 11 Nov 2019 14:09:36 +0800 Subject: [PATCH] =?UTF-8?q?WIP:=20G6=20=E8=BF=81=E7=A7=BB=E6=96=B0?= =?UTF-8?q?=E5=AE=98=E7=BD=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shape/customEdge/demo/customPolyline.js | 101 +++++++++++++++ .../shape/customEdge/demo/customPolyline2.js | 92 ++++++++++++++ .../shape/customEdge/demo/edgeMulLabel.js | 115 ++++++++++++++++++ examples/shape/customEdge/demo/meta.json | 23 ++++ examples/shape/customEdge/index.zh.md | 17 +++ examples/shape/defaultEdges/demo/arc.js | 70 +++++++++++ examples/shape/defaultEdges/demo/cubic1.js | 75 ++++++++++++ examples/shape/defaultEdges/demo/cubic2.js | 53 ++++++++ examples/shape/defaultEdges/demo/line.js | 0 examples/shape/defaultEdges/demo/loop.js | 51 ++++++++ examples/shape/defaultEdges/demo/meta.json | 44 +++++++ examples/shape/defaultEdges/demo/polyline1.js | 43 +++++++ examples/shape/defaultEdges/demo/polyline2.js | 46 +++++++ examples/shape/defaultEdges/demo/polyline3.js | 59 +++++++++ examples/shape/defaultEdges/index.zh.md | 4 +- package.json | 2 +- 16 files changed, 792 insertions(+), 3 deletions(-) create mode 100644 examples/shape/customEdge/demo/customPolyline.js create mode 100644 examples/shape/customEdge/demo/customPolyline2.js create mode 100644 examples/shape/customEdge/demo/edgeMulLabel.js create mode 100644 examples/shape/customEdge/demo/meta.json create mode 100644 examples/shape/customEdge/index.zh.md create mode 100644 examples/shape/defaultEdges/demo/arc.js create mode 100644 examples/shape/defaultEdges/demo/cubic1.js create mode 100644 examples/shape/defaultEdges/demo/cubic2.js delete mode 100644 examples/shape/defaultEdges/demo/line.js create mode 100644 examples/shape/defaultEdges/demo/loop.js create mode 100644 examples/shape/defaultEdges/demo/meta.json create mode 100644 examples/shape/defaultEdges/demo/polyline1.js create mode 100644 examples/shape/defaultEdges/demo/polyline2.js create mode 100644 examples/shape/defaultEdges/demo/polyline3.js diff --git a/examples/shape/customEdge/demo/customPolyline.js b/examples/shape/customEdge/demo/customPolyline.js new file mode 100644 index 0000000000..cffcde13f4 --- /dev/null +++ b/examples/shape/customEdge/demo/customPolyline.js @@ -0,0 +1,101 @@ +import G6 from '@antv/g6'; + +/** + * 该案例演示如何通过继承line，复写getPath和getShapeStyle方法自定义折线。 + * by siogo 提供的 issue（https://github.com/antvis/g6/issues/814） + * + * 如果要适应所有拖动情况，则需要根据拖动的位置来动态改变锚点 + * + */ + +const data = { + nodes: [{ + id: '7', + x: 150, + y: 100, + size: 40, + anchorPoints: [[ 1, 0.5 ], [ 1, 0 ]] + }, { + id: '8', + x: 300, + y: 200, + size: 40, + anchorPoints: [[ 0, 0.5 ], [ 0, 1 ]] + }], + edges: [{ + source: '7', + target: '8', + sourceAnchor: 0, + targetAnchor: 0 + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + modes: { + // 支持的 behavior + default: [ 'drag-node', 'drag-canvas' ] + }, + defaultNode: { + shape: 'circle', + style: { + fill: '#40a9ff' + }, + linkPoints: { + left: true, + right: true, + fill: '#fff', + size: 3 + } + }, + defaultEdge: { + shape: 'line-arrow', + style: { + stroke: '#bae7ff' + } + } +}); + +G6.registerEdge('line-arrow', { + getPath(points) { + const startPoint = points[0]; + const endPoint = points[1]; + return [ + [ 'M', startPoint.x, startPoint.y ], + [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y ], + [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y ], + [ 'L', endPoint.x, endPoint.y ]]; + }, + getShapeStyle(cfg) { + const startPoint = cfg.startPoint; + const endPoint = cfg.endPoint; + const controlPoints = this.getControlPoints(cfg); + let points = [ startPoint ]; // 添加起始点 + // 添加控制点 + if (controlPoints) { + points = points.concat(controlPoints); + } + // 添加结束点 + points.push(endPoint); + const path = this.getPath(points); + const style = G6.Util.mix({}, G6.Global.defaultEdge.style, { + stroke: '#BBB', + lineWidth: 1, + path, + startArrow: { + path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z', + d: 6 + }, + endArrow: { + path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z', + d: 6 + } + }, cfg.style); + return style; + } +}, 'line'); + +graph.data(data); +graph.render(); diff --git a/examples/shape/customEdge/demo/customPolyline2.js b/examples/shape/customEdge/demo/customPolyline2.js new file mode 100644 index 0000000000..3387b17802 --- /dev/null +++ b/examples/shape/customEdge/demo/customPolyline2.js @@ -0,0 +1,92 @@ +import G6 from '@antv/g6'; + +/** + * 该案例演示如何通过复写复写draw方法自定义折线。 + * by siogo 提供的 issue（https://github.com/antvis/g6/issues/814） + * + * 如果要适应所有拖动情况，则需要根据拖动的位置来动态改变锚点 + */ +G6.registerEdge('line-arrow', { + options: { + style: { + stroke: '#ccc' + } + }, + draw: function draw(cfg, group) { + const startPoint = cfg.startPoint; + const endPoint = cfg.endPoint; + + const stroke = cfg.style && cfg.style.stroke || this.options.style.stroke; + + const keyShape = group.addShape('path', { + attrs: { + path: [[ 'M', startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y ], [ 'L', endPoint.x, endPoint.y ]], + stroke, + lineWidth: 1, + startArrow: { + path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z', + d: 6 + }, + endArrow: { + path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z', + d: 6 + }, + className: 'edge-shape' + } + }); + return keyShape; + } +}); + +const data = { + nodes: [{ + id: '7', + x: 150, + y: 100, + size: 40, + anchorPoints: [[ 1, 0.5 ], [ 1, 0 ]] + }, { + id: '8', + x: 300, + y: 200, + size: 40, + anchorPoints: [[ 0, 0.5 ], [ 0, 1 ]] + }], + edges: [{ + source: '7', + target: '8', + sourceAnchor: 0, + targetAnchor: 0 + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 300, + modes: { + // 支持的 behavior + default: [ 'drag-node', 'drag-canvas' ] + }, + defaultNode: { + shape: 'circle', + style: { + fill: '#40a9ff' + }, + linkPoints: { + left: true, + right: true, + fill: '#fff', + size: 3 + } + }, + defaultEdge: { + shape: 'line-arrow', + style: { + stroke: '#bae7ff' + } + } +}); + +graph.data(data); +graph.render(); diff --git a/examples/shape/customEdge/demo/edgeMulLabel.js b/examples/shape/customEdge/demo/edgeMulLabel.js new file mode 100644 index 0000000000..981262d534 --- /dev/null +++ b/examples/shape/customEdge/demo/edgeMulLabel.js @@ -0,0 +1,115 @@ +import G6 from '@antv/g6'; + +/** + * 自定义边示例 + * 演示自定义边上绘制多个label + * by 长哲 + */ + +// 注册自定义边 +G6.registerEdge('multipleLabelsEdge', { + options: { + style: { + stroke: '#000' + } + }, + labelAutoRotate: true, + draw(cfg, group) { + const startPoint = cfg.startPoint, + endPoint = cfg.endPoint; + const stroke = cfg.style && cfg.style.stroke || this.options.style.stroke; + + const shape = group.addShape('path', { + attrs: { + stroke, + path: [ + [ 'M', startPoint.x, startPoint.y ], + [ 'L', endPoint.x, endPoint.y ]] + } + }); + if (cfg.label && cfg.label.length) { + // 绘制左边的label + group.addShape('text', { + attrs: { + text: cfg.label[0], + fill: '#595959', + textAlign: 'start', + textBaseline: 'middle', + x: startPoint.x, + y: startPoint.y - 10 + } + }); + if (cfg.label.length > 1) { + // 绘制右边的label + group.addShape('text', { + attrs: { + text: cfg.label[1], + fill: '#595959', + textAlign: 'end', + textBaseline: 'middle', + x: endPoint.x, + y: endPoint.y - 10 + } + }); + } + } + // 返回边的keyShape + return shape; + } +}); + +const data = { + nodes: [{ + id: 'node1', + x: 100, + y: 100, + label: 'node1' + }, { + id: 'node2', + x: 300, + y: 100, + label: 'node2' + }], + edges: [{ + source: 'node1', + target: 'node2', + // 定义边左侧和右侧的label + label: [ 'hello', 'world' ] + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + modes: { + default: [{ + type: 'drag-node', + delegate: false + }, 'drag-canvas', { + type: 'zoom-canvas', + sensitivity: 0.5 + }] + }, + defaultNode: { + shape: 'circle', + size: [ 50 ], + style: { + fill: '#40a9ff' + }, + linkPoints: { + left: true, + right: true, + fill: '#fff', + size: 3 + } + }, + defaultEdge: { + shape: 'multipleLabelsEdge', + style: { + stroke: '#bae7ff' + } + } +}); +graph.data(data); +graph.render(); diff --git a/examples/shape/customEdge/demo/meta.json b/examples/shape/customEdge/demo/meta.json new file mode 100644 index 0000000000..5afb2a32ea --- /dev/null +++ b/examples/shape/customEdge/demo/meta.json @@ -0,0 +1,23 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "customPolyline.js", + "title": "折线图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xrz9QLtS3-IAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "customPolyline2.js", + "title": "折线图2", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xrz9QLtS3-IAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "edgeMulLabel.js", + "title": "边上多label", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xrz9QLtS3-IAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/shape/customEdge/index.zh.md b/examples/shape/customEdge/index.zh.md new file mode 100644 index 0000000000..7ac1bfb50d --- /dev/null +++ b/examples/shape/customEdge/index.zh.md @@ -0,0 +1,17 @@ +--- +title: 自定义边 +order: 3 +redirect_from: + - /zh/examples +--- + +自定义边。 + +## 何时使用 + +内置的边不能满足需求时，可以使用自定义边来实现。 +两种自定义折线的区别，主要在于实现方式不同。 +- 第一种方式是通过继承line，复写getPath和getShapeStyle方法自定义折线； +- 第二种方式是通过复写复写draw方法自定义折线。 + +如果在拖动过程中，需要让边链接到节点正确的问题，则需要动态改变节点的锚点。对于折线，建议使用 G6 内置的 `polyline` ，内置的 `polyline` 会自动处理锚点的位置。 \ No newline at end of file diff --git a/examples/shape/defaultEdges/demo/arc.js b/examples/shape/defaultEdges/demo/arc.js new file mode 100644 index 0000000000..db99738138 --- /dev/null +++ b/examples/shape/defaultEdges/demo/arc.js @@ -0,0 +1,70 @@ +import G6 from '@antv/g6'; + +/** + * 该案例演示如何使用内置折线 arc + * by 十吾 + */ + +const data = { + nodes: [{ + id: '0', + x: 150, + y: 50 + }, { + id: '1', + x: 350, + y: 250 + }], + edges: [ +// 内置弧线 + { + id: 'edge0', + source: '0', + target: '1', + label: 'curveOffset = 20', + curveOffset: 20 + }, +// 配置内置折线的弯折弧度、端点最小距离 + { + id: 'edge1', + source: '0', + target: '1', + label: 'curveOffset = 50', + curveOffset: 50 + }, +// // 带有 controlPoints，则按照给定控制点弯折 + { + id: 'edge2', + source: '0', + target: '1', + label: 'curveOffset = -50', + curveOffset: -50 + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + linkCenter: true, + defaultNode: { + size: 45 + }, + defaultEdge: { + shape: 'arc', + style: { + stroke: '#bae7ff' + }, + labelCfg: { + autoRotate: true, + refY: -10 + } + }, + modes: { + // 支持的 behavior + default: [ 'drag-node' ] + } +}); + +graph.data(data); +graph.render(); diff --git a/examples/shape/defaultEdges/demo/cubic1.js b/examples/shape/defaultEdges/demo/cubic1.js new file mode 100644 index 0000000000..d5f6529e03 --- /dev/null +++ b/examples/shape/defaultEdges/demo/cubic1.js @@ -0,0 +1,75 @@ +import G6 from '@antv/g6'; + +/** + * 演示贝塞尔曲线的用法 + * + * **/ + +G6.registerNode('my-rect', { + getAnchorPoints: function getAnchorPoints() { + return [[ 0.5, 0 ], [ 0.5, 1 ]]; + } +}, 'rect'); + +const data = { + nodes: [{ + id: 'node0', + x: 200, + y: 10, + size: 20 + }, { + id: 'node1', + x: 200, + y: 50, + label: '1222', + shape: 'my-rect' + }, { + id: 'node2', + x: 150, + y: 150, + shape: 'my-rect' + }, { + id: 'node3', + x: 250, + y: 150, + shape: 'my-rect' + }, { + id: 'node4', + x: 200, + y: 250, + shape: 'my-rect' + }], + edges: [{ + source: 'node0', + target: 'node1' + }, { + source: 'node1', + target: 'node2' + }, { + source: 'node1', + target: 'node3' + }, { + source: 'node2', + target: 'node4' + }, { + source: 'node3', + target: 'node4' + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + modes: { + default: [ 'drag-canvas' ] + }, + defaultEdge: { + shape: 'cubic-vertical', + style: { + stroke: '#bae7ff' + } + } +}); +graph.data(data); +graph.render(); diff --git a/examples/shape/defaultEdges/demo/cubic2.js b/examples/shape/defaultEdges/demo/cubic2.js new file mode 100644 index 0000000000..8a30468cb9 --- /dev/null +++ b/examples/shape/defaultEdges/demo/cubic2.js @@ -0,0 +1,53 @@ +import G6 from '@antv/g6'; + +/** + * 演示贝塞尔曲线的用法 + * + * **/ +const data = { + nodes: [{ + id: 'node5', + x: 150, + y: 200, + label: '5', + anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]] + }, { + id: 'node6', + x: 300, + y: 150, + label: '6', + anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]] + }, { + id: 'node7', + x: 300, + y: 250, + label: '7', + anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]] + }], + edges: [{ + source: 'node5', + target: 'node6', + shape: 'cubic-horizontal' + }, { + source: 'node5', + target: 'node7', + shape: 'cubic-horizontal' + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + modes: { + default: [ 'drag-canvas' ] + }, + defaultEdge: { + shape: 'cubic-horizontal', + style: { + stroke: '#bae7ff' + } + } +}); +graph.data(data); +graph.render(); diff --git a/examples/shape/defaultEdges/demo/line.js b/examples/shape/defaultEdges/demo/line.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/shape/defaultEdges/demo/loop.js b/examples/shape/defaultEdges/demo/loop.js new file mode 100644 index 0000000000..589ace6e31 --- /dev/null +++ b/examples/shape/defaultEdges/demo/loop.js @@ -0,0 +1,51 @@ +import G6 from '@antv/g6'; + +const data = { + nodes: [{ + id: '0', + x: 150, + y: 150 + }, { + id: '1', + x: 350, + y: 150 + }], + edges: [ + // 内置 loop + { + source: '0', + target: '0' + }, + { + source: '1', + target: '1' + } + ] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + defaultEdge: { + shape: 'loop', + style: { + stroke: '#bae7ff', + endArrow: { + path: 'M 10,0 L -10,-10 L -10,10 Z', + d: 10 + } + }, + // 更多关于 loop 的配置请参考http://antv.alipay.com/zh/docs/manual/middle/elements/edges/loop/#%E8%87%AA%E7%8E%AF%E7%89%B9%E6%AE%8A%E9%85%8D%E7%BD%AE-loopcfg + loopCfg: { + position: 'top' + } + }, + modes: { + // 支持的 behavior + default: [ 'drag-node' ] + } +}); + +graph.data(data); +graph.render(); diff --git a/examples/shape/defaultEdges/demo/meta.json b/examples/shape/defaultEdges/demo/meta.json new file mode 100644 index 0000000000..4edf7c8b9a --- /dev/null +++ b/examples/shape/defaultEdges/demo/meta.json @@ -0,0 +1,44 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "polyline1.js", + "title": "折线图1", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*o3pVSY_kwjQAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "polyline2.js", + "title": "折线图2", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*t2daQ7LuDRYAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "polyline3.js", + "title": "折线图3", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kalOTZVOah4AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "cubic1.js", + "title": "三次贝塞尔曲线-垂直", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*E1n9QbVczJ0AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "cubic2.js", + "title": "三次贝塞尔曲线-水平", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2IDXQ7JSRU0AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "arc.js", + "title": "弧线", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*U6DRTLE9EFIAAAAAAAAAAABkARQnAQ" + } + , + { + "filename": "loop.js", + "title": "自环边", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ln_wQqOV118AAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/shape/defaultEdges/demo/polyline1.js b/examples/shape/defaultEdges/demo/polyline1.js new file mode 100644 index 0000000000..861760c9bb --- /dev/null +++ b/examples/shape/defaultEdges/demo/polyline1.js @@ -0,0 +1,43 @@ +import G6 from '@antv/g6'; + +/** + * 该案例演示如何使用内置折线 polyline。 + * by 十吾 + */ + +const data = { + nodes: [{ + id: '0', + x: 150, + y: 100 + }, { + id: '1', + x: 350, + y: 300 + }], + edges: [ + // 内置折线 + { + source: '0', + target: '1' + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + defaultEdge: { + shape: 'polyline', + style: { + stroke: '#bae7ff' + } + }, + modes: { + // 支持的 behavior + default: [ 'drag-node' ] + } +}); + +graph.data(data); +graph.render(); diff --git a/examples/shape/defaultEdges/demo/polyline2.js b/examples/shape/defaultEdges/demo/polyline2.js new file mode 100644 index 0000000000..db309f0a3d --- /dev/null +++ b/examples/shape/defaultEdges/demo/polyline2.js @@ -0,0 +1,46 @@ +import G6 from '@antv/g6'; + +/** + * 该案例演示如何使用内置折线 polyline。 + * by 十吾 + */ + +const data = { + nodes: [{ + id: '2', + x: 150, + y: 150 + }, { + id: '3', + x: 350, + y: 250 + }], + edges: [ + // 配置内置折线的弯折弧度、端点最小距离 + { + source: '2', + target: '3' + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + defaultEdge: { + shape: 'polyline', + style: { + radius: 10, + offset: 30, + endArrow: true, + stroke: '#bae7ff' + } + }, + modes: { + // 支持的 behavior + default: [ 'drag-node' ] + } +}); + +graph.data(data); +graph.render(); diff --git a/examples/shape/defaultEdges/demo/polyline3.js b/examples/shape/defaultEdges/demo/polyline3.js new file mode 100644 index 0000000000..ad3967d1b3 --- /dev/null +++ b/examples/shape/defaultEdges/demo/polyline3.js @@ -0,0 +1,59 @@ +import G6 from '@antv/g6'; + +/** + * 该案例演示如何使用内置折线 polyline。 + * by 十吾 + */ + +const data = { + nodes: [{ + id: '4', + x: 150, + y: 100 + }, { + id: '5', + x: 350, + y: 250 + }], + edges: [ + // 带有 controlPoints，则按照给定控制点弯折 + { + source: '4', + target: '5', + controlPoints: [{ + x: 260, + y: 80 + }, { + x: 320, + y: 50 + }, { + x: 390, + y: 110 + }, { + x: 420, + y: 110 + }, { + x: 420, + y: 140 + }] + }] +}; + +const graph = new G6.Graph({ + container: 'container', + width: 500, + height: 500, + defaultEdge: { + shape: 'polyline', + style: { + stroke: '#bae7ff' + } + }, + modes: { + // 支持的 behavior + default: [ 'drag-node' ] + } +}); + +graph.data(data); +graph.render(); diff --git a/examples/shape/defaultEdges/index.zh.md b/examples/shape/defaultEdges/index.zh.md index 6d0be96274..46312ae553 100644 --- a/examples/shape/defaultEdges/index.zh.md +++ b/examples/shape/defaultEdges/index.zh.md @@ -5,8 +5,8 @@ redirect_from: - /zh/examples --- -图表的基本描述。 +G6 内置的边类型。 ## 何时使用 -何时使用何时使用何时使用何时使用何时使用何时使用何时使用何时使用何时使用。 \ No newline at end of file +G6 内置了直线、折线、自环等多种边类型，具体的可参考[《 G6 内置的边》](/zh/docs/manual/middle/elements/defaultEdge)，这里只演示了配置起来稍微麻烦的几种类型：`polyline`、`cubic`、`arc` 和 `loop`。 \ No newline at end of file diff --git a/package.json b/package.json index d123ec8130..4ca9ca615a 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ ], "license": "MIT", "devDependencies": { - "@antv/gatsby-theme-antv": "^0.9.17", + "@antv/gatsby-theme-antv": "^0.9.41", "@antv/torch": "^1.0.5", "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0",