├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.en.md ├── README.md ├── demo ├── .babelrc ├── component │ ├── basic │ │ ├── animate.js │ │ ├── customAnchor.js │ │ ├── customDraw.js │ │ ├── customEnterLeave.js │ │ ├── customFlowEdge.js │ │ ├── customInherit.js │ │ ├── defaultEdge.js │ │ ├── defaultGroup.js │ │ ├── defaultNode.js │ │ ├── graphChangeSize.js │ │ ├── graphZIndex.js │ │ ├── index.js │ │ ├── interactionBehaviorMode.js │ │ ├── interactionDragNode.js │ │ ├── layoutBase.js │ │ ├── quickNet.js │ │ ├── quickTree.js │ │ ├── viewportFitView.js │ │ ├── viewportFocus.js │ │ ├── viewportTranslate.js │ │ └── viewportZoom.js │ ├── gallery │ │ ├── codeTree.js │ │ ├── index.js │ │ ├── treeCompact.js │ │ ├── treeDendrogram.js │ │ ├── treeIndented.js │ │ ├── treeMindMap.js │ │ ├── university.js │ │ ├── university.json │ │ ├── xiaomi.js │ │ └── xiaomi.json │ ├── index.js │ └── plugin │ │ ├── archimeddeanSpiral.js │ │ ├── circle.js │ │ ├── index.js │ │ ├── maxSpanningForest.js │ │ ├── minimap.js │ │ └── quadraticCurve.js ├── container │ └── App.js ├── index.html ├── index.js └── webpack.config.js ├── dist ├── 16b90df38d2b2755cb22.hot-update.json ├── 3c4439b5cf7895427113.hot-update.json ├── 6201ece0d47ea12730d0.hot-update.json ├── 6294501d302255885fa4.hot-update.json ├── 6d5c7a515dd2eeae925f.hot-update.json ├── 6df61dc3edce25972a35.hot-update.json ├── 8b4433c9b2f9b5e39f40.hot-update.json ├── 8df8af40cef15d5b6962.hot-update.json ├── 94c376cd3f6e393f4b03.hot-update.json ├── 9ccb5ff6ed82f89eb753.hot-update.json ├── 9fcfa60e2a46f808ddf8.hot-update.json ├── a421e7f5e1124178db81.hot-update.json ├── affda1b50c0a96d99cb7.hot-update.json ├── ca422d2851f20f63c81f.hot-update.json ├── cb53c6d90020e9c6bb5a.hot-update.json ├── cd131dd65bb92cc56e65.hot-update.json ├── cfb4cb53265eb603ca0e.hot-update.json ├── client │ ├── assets.json │ ├── demo.7c03560825038f47d3a9.css │ ├── demo.7c03560825038f47d3a9.js │ ├── demo.7c03560825038f47d3a9.js.map │ ├── dll │ │ ├── vendor1.js │ │ ├── vendor1.js.json │ │ ├── vendor2.js │ │ └── vendor2.js.json │ ├── fonts │ │ ├── tdicon.eot │ │ ├── tdicon.svg │ │ └── tdicon.ttf │ ├── home.7c03560825038f47d3a9.css │ ├── home.7c03560825038f47d3a9.js │ └── home.7c03560825038f47d3a9.js.map ├── d20b7c0772f614ead422.hot-update.json ├── f51fc46545c8f7f2eb38.hot-update.json ├── f57fee17a6ed9f763c6b.hot-update.json ├── main.16b90df38d2b2755cb22.hot-update.js ├── main.16b90df38d2b2755cb22.hot-update.js.map ├── main.3c4439b5cf7895427113.hot-update.js ├── main.3c4439b5cf7895427113.hot-update.js.map ├── main.6201ece0d47ea12730d0.hot-update.js ├── main.6201ece0d47ea12730d0.hot-update.js.map ├── main.6294501d302255885fa4.hot-update.js ├── main.6294501d302255885fa4.hot-update.js.map ├── main.6d5c7a515dd2eeae925f.hot-update.js ├── main.6d5c7a515dd2eeae925f.hot-update.js.map ├── main.6df61dc3edce25972a35.hot-update.js ├── main.6df61dc3edce25972a35.hot-update.js.map ├── main.8b4433c9b2f9b5e39f40.hot-update.js ├── main.8b4433c9b2f9b5e39f40.hot-update.js.map ├── main.8df8af40cef15d5b6962.hot-update.js ├── main.8df8af40cef15d5b6962.hot-update.js.map ├── main.94c376cd3f6e393f4b03.hot-update.js ├── main.94c376cd3f6e393f4b03.hot-update.js.map ├── main.9ccb5ff6ed82f89eb753.hot-update.js ├── main.9ccb5ff6ed82f89eb753.hot-update.js.map ├── main.9fcfa60e2a46f808ddf8.hot-update.js ├── main.9fcfa60e2a46f808ddf8.hot-update.js.map ├── main.a421e7f5e1124178db81.hot-update.js ├── main.a421e7f5e1124178db81.hot-update.js.map ├── main.affda1b50c0a96d99cb7.hot-update.js ├── main.affda1b50c0a96d99cb7.hot-update.js.map ├── main.ca422d2851f20f63c81f.hot-update.js ├── main.ca422d2851f20f63c81f.hot-update.js.map ├── main.cb53c6d90020e9c6bb5a.hot-update.js ├── main.cb53c6d90020e9c6bb5a.hot-update.js.map ├── main.cd131dd65bb92cc56e65.hot-update.js ├── main.cd131dd65bb92cc56e65.hot-update.js.map ├── main.cfb4cb53265eb603ca0e.hot-update.js ├── main.cfb4cb53265eb603ca0e.hot-update.js.map ├── main.d20b7c0772f614ead422.hot-update.js ├── main.d20b7c0772f614ead422.hot-update.js.map ├── main.f51fc46545c8f7f2eb38.hot-update.js ├── main.f51fc46545c8f7f2eb38.hot-update.js.map ├── main.f57fee17a6ed9f763c6b.hot-update.js ├── main.f57fee17a6ed9f763c6b.hot-update.js.map ├── server.js └── server.js.map ├── doc ├── api │ ├── graph.md │ ├── index.md │ └── tree.md └── tutorial │ └── chart.md ├── package.json ├── plugins ├── behaviour.analysis │ └── index.js ├── edge.quadraticCurve │ └── index.js ├── index.js ├── layout.archimeddeanSpiral │ ├── index.js │ └── layout.js ├── layout.circle │ ├── index.js │ └── layout.js ├── layout.dagre │ ├── index.js │ └── layout.js ├── layout.forceAtlas2 │ ├── index.js │ ├── layout.js │ └── quadTree │ │ ├── body.js │ │ ├── quad.js │ │ └── quadTree.js ├── layout.grid │ ├── index.js │ └── layout.js ├── template.maxSpanningForest │ ├── index.js │ ├── maxSpanningForest.js │ └── maxSpanningTree.js ├── tool.d3.mapper │ └── index.js ├── tool.fisheye │ ├── index.js │ └── tool.js ├── tool.mapper │ └── index.js ├── tool.minimap │ ├── index.js │ └── minimap.js ├── tool.tooltip │ ├── README.md │ └── index.js └── util.randomData │ └── index.js ├── src ├── components │ ├── Base │ │ └── index.jsx │ ├── Graph │ │ ├── index.jsx │ │ └── pureGraph.jsx │ ├── Layout │ │ └── index.jsx │ ├── Mapper │ │ └── index.jsx │ ├── RootComponent.jsx │ ├── Tree │ │ ├── index.jsx │ │ └── pureTree.jsx │ ├── empty.jsx │ └── index.js ├── index.jsx ├── processor │ ├── GraphProcessor.js │ ├── TreeProcessor.js │ ├── configAdd.js │ ├── configMerge.js │ ├── event.js │ ├── g6Creator.js │ ├── g6Delete.js │ └── g6Update.js └── shared │ ├── index.js │ └── util.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"], 3 | "plugins": [ 4 | "transform-object-assign", 5 | "transform-object-rest-spread", 6 | "transform-runtime" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [makefile] 16 | indent_style = tab 17 | indent_size = 4 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | demo/ 3 | testDemo/ 4 | doc/ 5 | es6/ 6 | node_modules/ 7 | lib/ -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "standard", 3 | "parser": "babel-eslint", 4 | "plugins": ["react"], 5 | "parserOptions": { 6 | "ecmaVersion": 6, 7 | "ecmaFeatures": { 8 | "jsx": true, 9 | "experimentalObjectRestSpread": true 10 | }, 11 | "sourceType": "module" 12 | }, 13 | "globals": { 14 | "it": true, 15 | "describe": true, 16 | "require": true, 17 | "process": true, 18 | "before": true, 19 | "after" : true, 20 | "sinon": true, 21 | "expect" : true, 22 | "beforeEach": true, 23 | "afterEach": true 24 | }, 25 | "env":{ 26 | "es6": true, 27 | "node": true, 28 | "browser": true 29 | }, 30 | "rules": { 31 | "quotes": "off", 32 | "no-mixed-operators": 0, 33 | "no-undef": 0, 34 | "func-names": 0, 35 | "react/jsx-uses-react": "error", 36 | "react/jsx-uses-vars": "error", 37 | "react/sort-comp": 0, 38 | "react/prop-types": 0, 39 | "react/jsx-first-prop-new-line": 0, 40 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".md"] }], 41 | "array-bracket-spacing": [2, "never"], 42 | "comma-dangle": [2, "never"], 43 | "comma-spacing": [2, { "before": false, "after": true }], 44 | "computed-property-spacing": [2, "never"], 45 | "constructor-super": 0, 46 | "default-case": 2, 47 | "eol-last": 2, 48 | "arrow-parens": 0, 49 | "generator-star-spacing": 0, 50 | "semi": 0, 51 | "space-before-function-paren": 0 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | node_modules 4 | umd 5 | lib 6 | es6 7 | coverage 8 | npm-debug.log 9 | *.orig 10 | .vscode/* 11 | plugin/slider/node_modules 12 | **/**/coverage/ 13 | dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | node_modules 4 | coverage 5 | npm-debug.log 6 | *.orig 7 | .vscode/* 8 | test/* 9 | doc/* 10 | pages/* 11 | demo/* 12 | testDemo/* -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hihl/g6-for-react/ab84321e45644b62a2467b59fee39a6daed9a36a/CHANGELOG.md -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Zephyr Yao 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hihl/g6-for-react/ab84321e45644b62a2467b59fee39a6daed9a36a/README.en.md -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/language-react-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![NPM Package](https://img.shields.io/npm/v/g6-for-react.svg)](https://www.npmjs.com/package/g6-for-react)[![NPM Downloads](https://img.shields.io/npm/dm/g6-for-react.svg)](https://npmjs.org/package/g6-for-react) 2 | 3 | # g6-for-react 4 | 基于蚂蚁金服关系数据可视化引擎g6的react版封装 5 | 6 | ## 安装 7 | 8 | ```bash 9 | npm install g6-for-react // or 10 | yarn add g6-for-react 11 | ``` 12 | 13 | ## dev build 14 | 15 | ```bash 16 | $ git clone https://github.com/hihl/g6-for-react.git 17 | $ cd g6-for-react 18 | $ npm install 19 | $ npm run build 20 | ``` 21 | 22 | ## dev demo 23 | 24 | ```bash 25 | $ sudo vi /etc/hosts 26 | // 加入 127.0.0.1 localhost 27 | $ npm run demo 28 | // 浏览器打开 http://localhost:3510/ 29 | ``` 30 | 31 | ## 快速开始 32 | 33 | ```jsx 34 | import { Graph } from 'g6-for-react'; 35 | 36 | const data = { 37 | nodes: [{ 38 | id: 'node1', 39 | x: 100, 40 | y: 200, 41 | label: '节点1' 42 | }, { 43 | id: 'node2', 44 | x: 300, 45 | y: 200, 46 | label: '节点2' 47 | }], 48 | edges: [{ 49 | target: 'node2', 50 | source: 'node1' 51 | }] 52 | }; 53 | 54 | 55 | ``` 56 | 57 | ## 文档 58 | 59 | ### 教程 60 | - [图表介绍](./doc/tutorial/chart.md) 61 | 62 | ### API 63 | - [g6-for-react](./doc/api/index.md) 64 | - 组件 65 | - [Graph](./doc/api/graph.md) -------------------------------------------------------------------------------- /demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-export-extensions", 4 | "transform-decorators-legacy", 5 | "transform-class-properties", 6 | "transform-object-rest-spread", 7 | "transform-function-bind" 8 | ], 9 | "presets": ["es2015", "react"] 10 | } 11 | -------------------------------------------------------------------------------- /demo/component/basic/animate.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class BasicAnimate extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | fitView: 'cc', 9 | height: window.innerHeight, 10 | animate: true, 11 | data: { 12 | nodes: [{ 13 | id: 'node1', 14 | x: 100, 15 | y: 200, 16 | label: '节点1' 17 | }] 18 | } 19 | }; 20 | } 21 | 22 | render() { 23 | return ( 24 |
25 |
26 | this.graph = graph}> 27 |
28 |
29 | ); 30 | } 31 | 32 | componentDidMount() { 33 | setTimeout(() => { 34 | this.graph.update('node1', { 35 | x: 50, 36 | y: 50 37 | }); 38 | }, 800); 39 | setTimeout(() => { 40 | this.setState({ data: { nodes: [{ 41 | id: 'node1', 42 | x: 200, 43 | y: 50, 44 | label: '节点1' 45 | }] } }); 46 | }, 1400); 47 | setTimeout(() => { 48 | this.setState({ data: { nodes: [] } }); 49 | }, 2000); 50 | } 51 | } -------------------------------------------------------------------------------- /demo/component/basic/customAnchor.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6, NodeMapper } from 'g6-for-react'; 3 | 4 | // 设置右边中点为连接锚点 5 | G6.registerNode('node2', { 6 | anchor: [ 7 | // 右边中点 8 | [1, 0.5]] 9 | }); 10 | 11 | // 设置相交盒模型为矩形 12 | G6.registerNode('node3', { 13 | anchor: { 14 | intersectBox: 'rect' 15 | } 16 | }); 17 | 18 | export default class CustomAnchor extends React.Component { 19 | constructor(props) { 20 | super(props); 21 | this.state = { 22 | data: { 23 | nodes: [{ 24 | id: 'node1', 25 | x: 250, 26 | y: 250 27 | }, { 28 | id: 'node2', 29 | x: 250, 30 | y: 100 31 | }, { 32 | id: 'node3', 33 | x: 50, 34 | y: 400 35 | }, { 36 | id: 'node5', 37 | x: 450, 38 | y: 400 39 | }], 40 | edges: [{ 41 | id: 'edge1', 42 | target: 'node2', 43 | source: 'node1' 44 | }, { 45 | id: 'edge2', 46 | target: 'node3', 47 | source: 'node1' 48 | }, { 49 | id: 'edge4', 50 | target: 'node5', 51 | source: 'node1' 52 | }] 53 | } 54 | }; 55 | } 56 | 57 | render() { 58 | return ( 59 |
60 |
61 | 62 | model.id} shape={model => model.id}/> 63 | 64 |
65 |
66 | ); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /demo/component/basic/customDraw.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6 } from 'g6-for-react'; 3 | 4 | G6.registerNode('customNode', { 5 | draw: item => { 6 | const group = item.getGraphicGroup(); 7 | group.addShape('text', { 8 | attrs: { 9 | x: 100, 10 | y: 100, 11 | fill: '#333', 12 | text: '我是一个自定义节点，\n有下面那个方形和我自己组成' 13 | } 14 | }); 15 | return group.addShape('rect', { 16 | attrs: { 17 | x: 100, 18 | y: 100, 19 | width: 100, 20 | height: 100, 21 | stroke: 'red' 22 | } 23 | }); 24 | } 25 | }); 26 | 27 | export default class CustomDraw extends React.Component { 28 | constructor(props) { 29 | super(props); 30 | this.state = { 31 | data: { 32 | nodes: [{ 33 | "shape": "customNode", 34 | "id": "node1" 35 | }] 36 | } 37 | }; 38 | } 39 | 40 | render() { 41 | return ( 42 |
43 |
44 | 45 |
46 |
47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /demo/component/basic/customEnterLeave.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6 } from 'g6-for-react'; 3 | 4 | G6.registerNode('customNode', { 5 | // 自定义入场动画 6 | enterAnimate: function enterAnimate(item) { 7 | const group = item.getGraphicGroup(); 8 | const model = item.getModel(); 9 | const x = model.x; 10 | const y = model.y; 11 | 12 | group.transform([['t', -x, -y], ['s', 0.01, 0.01], ['t', x, y]]); 13 | !group.get('destroyed') && group.animate({ 14 | transform: [['t', -x, -y], ['s', 100, 100], ['t', x, y]] 15 | }, 450, 'easeBackOut'); 16 | }, 17 | 18 | // 自定义出场动画 19 | leaveAnimate: function leaveAnimate(item) { 20 | const group = item.getGraphicGroup(); 21 | const model = item.getModel(); 22 | const x = model.x; 23 | const y = model.y; 24 | group && !group.get('destroyed') && group.animate({ 25 | transform: [['t', -x, -y], ['s', 0.01, 0.01], ['t', x, y]] 26 | }, 450, 'easeCircleOut', function() { 27 | group.remove(); 28 | }); 29 | } 30 | }); 31 | 32 | export default class CustomEnterLeave extends React.Component { 33 | constructor(props) { 34 | super(props); 35 | this.state = { 36 | data: { 37 | nodes: [{ 38 | "shape": "customNode", 39 | "id": "node1", 40 | x: 100, 41 | y: 100 42 | }] 43 | } 44 | }; 45 | } 46 | 47 | render() { 48 | return ( 49 |
50 |
51 | 52 |
53 |
54 | ); 55 | } 56 | 57 | componentDidMount() { 58 | setTimeout(() => { 59 | this.setState({ data: { nodes: [] } }); 60 | }, 800); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /demo/component/basic/customFlowEdge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6, EdgeMapper } from 'g6-for-react'; 3 | 4 | G6.registerEdge('flowingEdge', { 5 | afterDraw: function afterDraw(item) { 6 | var keyShape = item.getKeyShape(); 7 | keyShape.attr('lineDash', [10, 10]); 8 | keyShape.attr('lineDashOffset', 0); 9 | keyShape.animate({ 10 | lineDashOffset: -20, 11 | repeat: true 12 | }, 500); 13 | } 14 | }); 15 | 16 | export default class CustomFlowEdge extends React.Component { 17 | constructor(props) { 18 | super(props); 19 | this.state = { 20 | data: { 21 | nodes: [{ 22 | id: 'node1', 23 | x: 100, 24 | y: 200 25 | }, { 26 | id: 'node2', 27 | x: 300, 28 | y: 200 29 | }], 30 | edges: [{ 31 | target: 'node2', 32 | source: 'node1' 33 | }] 34 | }, 35 | flowingEdge: true 36 | }; 37 | } 38 | 39 | render() { 40 | return ( 41 |
42 |
43 | 44 | { this.state.flowingEdge && } 45 | 46 |
47 |
48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /demo/component/basic/customInherit.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6 } from 'g6-for-react'; 3 | 4 | G6.registerNode('rect', { 5 | draw: function draw(item) { 6 | var group = item.getGraphicGroup(); 7 | this.drawText(item); 8 | return group.addShape('rect', { 9 | attrs: { 10 | x: 100, 11 | y: 100, 12 | width: 100, 13 | height: 100, 14 | stroke: 'red' 15 | } 16 | }); 17 | }, 18 | drawText: function drawText(item) { 19 | var group = item.getGraphicGroup(); 20 | var text = this.getText(); 21 | group.addShape('text', { 22 | attrs: { 23 | x: 100, 24 | y: 100, 25 | fill: '#333', 26 | text: text 27 | } 28 | }); 29 | }, 30 | getText: function getText() { 31 | return '我是一个节点 rect'; 32 | } 33 | }); 34 | 35 | G6.registerNode('custom', { 36 | getText: function getText() { 37 | return '我是一个自定义节点，\n继承于 rect'; 38 | } 39 | }, 'rect'); 40 | 41 | export default class CustomInherit extends React.Component { 42 | constructor(props) { 43 | super(props); 44 | this.state = { 45 | data: { 46 | nodes: [{ 47 | id: 'node1', 48 | x: 50, 49 | y: 50, 50 | shape: 'rect' 51 | }, { 52 | id: 'node2', 53 | x: 100, 54 | y: 200, 55 | shape: 'custom' 56 | }] 57 | } 58 | }; 59 | } 60 | 61 | render() { 62 | return ( 63 |
64 |
65 | 66 |
67 |
68 | ); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /demo/component/basic/defaultEdge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class DefaultEdge extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200 13 | }, { 14 | id: 'node2', 15 | x: 300, 16 | y: 200 17 | }], 18 | edges: [{ 19 | source: 'node1', 20 | target: 'node2', 21 | label: '普通边' 22 | }, { 23 | source: 'node1', 24 | target: { 25 | x: 100, 26 | y: 50 27 | }, 28 | label: '单向悬空边' 29 | }, { 30 | source: { 31 | x: 150, 32 | y: 50 33 | }, 34 | target: { 35 | x: 150, 36 | y: 100 37 | }, 38 | label: '双向悬空边' 39 | }, { 40 | source: 'node1', 41 | target: { 42 | x: 100, 43 | y: 280 44 | }, 45 | style: { 46 | endArrow: true 47 | }, 48 | label: '箭头' 49 | }, { 50 | source: 'node1', 51 | target: { 52 | x: 10, 53 | y: 200 54 | }, 55 | sizesize: 4, 56 | label: '粗细' 57 | }, { 58 | source: 'node2', 59 | target: { 60 | x: 400, 61 | y: 200 62 | }, 63 | color: 'red', 64 | label: '颜色' 65 | }] 66 | } 67 | }; 68 | } 69 | 70 | render() { 71 | return ( 72 |
73 |
74 | 75 |
76 |
77 | ); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /demo/component/basic/defaultGroup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class DefaultGroup extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200, 13 | label: '节点1', 14 | parent: 'group1' 15 | }, { 16 | id: 'node2', 17 | x: 300, 18 | y: 200, 19 | label: '节点2', 20 | parent: 'group1' 21 | }, { 22 | id: 'node3', 23 | x: 100, 24 | y: 300, 25 | label: '节点3', 26 | parent: 'group2' 27 | }, { 28 | id: 'node4', 29 | x: 300, 30 | y: 300, 31 | label: '节点4', 32 | parent: 'group2' 33 | }], 34 | edges: [{ 35 | id: 'edge1', 36 | target: 'node2', 37 | source: 'node1' 38 | }], 39 | groups: [{ 40 | id: 'group1', 41 | label: '展开群组' 42 | }, { 43 | id: 'group2', 44 | label: '折叠群组', 45 | collapsed: true 46 | }] 47 | } 48 | }; 49 | } 50 | 51 | render() { 52 | return ( 53 |
54 |
55 | 56 |
57 |
58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /demo/component/basic/defaultNode.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class DefaultNode extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200, 13 | size: 40, 14 | label: '节点1' 15 | }, { 16 | id: 'node2', 17 | x: 300, 18 | y: 200, 19 | color: '#eb2f96', 20 | label: '节点2' 21 | }], 22 | edges: [{ 23 | id: 'edge1', 24 | target: 'node2', 25 | source: 'node1' 26 | }] 27 | } 28 | }; 29 | } 30 | 31 | render() { 32 | return ( 33 |
34 |
35 | 36 |
37 |
38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /demo/component/basic/graphChangeSize.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class GraphChangeSize extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200, 13 | size: 40, 14 | label: '节点1' 15 | }, { 16 | id: 'node2', 17 | x: 300, 18 | y: 200, 19 | color: '#eb2f96', 20 | label: '节点2' 21 | }], 22 | edges: [{ 23 | id: 'edge1', 24 | target: 'node2', 25 | source: 'node1' 26 | }] 27 | }, 28 | width: window.innerWidth, 29 | height: window.innerHeight 30 | }; 31 | } 32 | 33 | render() { 34 | return ( 35 |
36 |
37 |
38 | 39 | 40 | 41 |
42 | 43 |
44 |
45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /demo/component/basic/graphZIndex.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, NodeMapper } from 'g6-for-react'; 3 | 4 | const nodes = []; 5 | const width = window.innerWidth; 6 | const height = window.innerHeight; 7 | const num = 500; 8 | for (let index = 0; index < num; index++) { 9 | nodes.push({ 10 | x: width * Math.random(), 11 | y: height * Math.random() 12 | }); 13 | } 14 | 15 | export default class GraphZIndex extends React.Component { 16 | constructor(props) { 17 | super(props); 18 | this.state = { 19 | data: { 20 | nodes 21 | } 22 | }; 23 | } 24 | 25 | onNodeMouseenter = e => { 26 | const item = e.item; 27 | this.graph.toFront(item); 28 | this.graph.update(item, { 29 | style: { 30 | fill: 'red' 31 | } 32 | }); 33 | }; 34 | 35 | onNodeMouseleave = e => { 36 | const item = e.item; 37 | this.graph.toBack(item); 38 | this.graph.update(item, { 39 | style: { 40 | fill: '#1890FF' 41 | } 42 | }); 43 | }; 44 | 45 | render() { 46 | return ( 47 |
48 |
49 | this.graph = graph} 54 | onNodeMouseenter={this.onNodeMouseenter} 55 | onNodeMouseleave={this.onNodeMouseleave} 56 | > 57 | 58 | 59 |
60 |
61 | ); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /demo/component/basic/index.js: -------------------------------------------------------------------------------- 1 | import Animate from './animate'; 2 | import QuickNet from './quickNet'; 3 | import QuickTree from './quickTree'; 4 | import CustomDraw from './customDraw'; 5 | import CustomAnchor from './customAnchor'; 6 | import CustomFlowEdge from './customFlowEdge'; 7 | import CustomInherit from './customInherit'; 8 | import CustomEnterLeave from './customEnterLeave'; 9 | import DefaultEdge from './defaultEdge'; 10 | import DefaultGroup from './defaultGroup'; 11 | import DefaultNode from './defaultNode'; 12 | import LayoutBase from './layoutBase'; 13 | import ViewportFocus from './viewportFocus'; 14 | import ViewportZoom from './viewportZoom'; 15 | import ViewportFitView from './viewportFitView'; 16 | import ViewportTranslate from './viewportTranslate'; 17 | import InteractionBehaviorMode from './interactionBehaviorMode'; 18 | import InteractionDragNode from './interactionDragNode'; 19 | import GraphChangeSize from './graphChangeSize'; 20 | import GraphZIndex from './graphZIndex'; 21 | 22 | export default { 23 | '基础': { 24 | '快速上手-网图': QuickNet, 25 | '快速上手-树图': QuickTree, 26 | '交互-模式与行为': InteractionBehaviorMode, 27 | '交互-拖拽节点': InteractionDragNode, 28 | '默认-边': DefaultEdge, 29 | '默认-群组': DefaultGroup, 30 | '默认-节点': DefaultNode, 31 | '动画': Animate, 32 | '图-更改画布尺寸': GraphChangeSize, 33 | '图-调整图层': GraphZIndex, 34 | '自定义-锚点': CustomAnchor, 35 | '自定义-绘制': CustomDraw, 36 | '自定义-流动效果线条': CustomFlowEdge, 37 | '自定义-继承': CustomInherit, 38 | '自定义-出入场动画': CustomEnterLeave, 39 | '布局-基础': LayoutBase, 40 | '视口-聚焦': ViewportFocus, 41 | '视口-缩放': ViewportZoom, 42 | '视口-自适应': ViewportFitView, 43 | '视口-平移': ViewportTranslate 44 | } 45 | } -------------------------------------------------------------------------------- /demo/component/basic/interactionBehaviorMode.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, NodeMapper, EdgeMapper, G6 } from 'g6-for-react'; 3 | 4 | // 注册鼠标进入节点变红的行为 5 | G6.registerBehaviour('mouseEnterFillRed', function(graph) { 6 | graph.behaviourOn('node:mouseenter', function(ev) { 7 | graph.update(ev.item, { 8 | color: 'red' 9 | }); 10 | }); 11 | }); 12 | 13 | // 注册鼠标进入节点变绿的行为 14 | G6.registerBehaviour('mouseEnterFillGreen', function(graph) { 15 | graph.behaviourOn('node:mouseenter', function(ev) { 16 | graph.update(ev.item, { 17 | color: 'green' 18 | }); 19 | }); 20 | }); 21 | 22 | // 注册鼠标移出节点变原色的行为 23 | G6.registerBehaviour('mouseLeaveResetFill', function(graph) { 24 | graph.behaviourOn('node:mouseleave', function(ev) { 25 | graph.update(ev.item, { 26 | color: '#1890FF' 27 | }); 28 | }); 29 | }); 30 | 31 | export default class InteractionBehaviorMode extends React.Component { 32 | constructor(props) { 33 | super(props); 34 | this.state = { 35 | data: { 36 | nodes: [{ 37 | id: '事件', 38 | x: 80, 39 | y: 150 40 | }, { 41 | id: '行为', 42 | x: 200, 43 | y: 150 44 | }, { 45 | id: '模式', 46 | x: 320, 47 | y: 150 48 | }], 49 | edges: [{ 50 | source: '事件', 51 | target: '行为', 52 | label: '组成' 53 | }, { 54 | source: '行为', 55 | target: '模式', 56 | label: '组成' 57 | }] 58 | }, 59 | mode: 'red' 60 | }; 61 | } 62 | 63 | render() { 64 | return ( 65 |
66 |
67 |
74 | this.graph = graph} 84 | > 85 | model.id}/> 86 | ({ endArrow: true })}/> 87 | 88 |
89 |
90 | ); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /demo/component/basic/interactionDragNode.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | const width = window.innerWidth; 5 | const height = window.innerHeight; 6 | 7 | export default class InteractionDragNode extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | data: { 12 | nodes: [{ 13 | id: 'node1', 14 | x: 100, 15 | y: 200 16 | }, { 17 | id: 'node2', 18 | x: 300, 19 | y: 200 20 | }], 21 | edges: [{ 22 | id: 'edge1', 23 | target: 'node2', 24 | source: 'node1' 25 | }] 26 | } 27 | }; 28 | } 29 | 30 | onNodeDragstart = ev => { 31 | const item = ev.item; 32 | 33 | const model = item.getModel(); 34 | this.node = item; 35 | this.dx = model.x - ev.x; 36 | this.dy = model.y - ev.y; 37 | }; 38 | 39 | onNodeDrag = ev => { 40 | this.node && this.graph.update(this.node, { 41 | x: ev.x + this.dx, 42 | y: ev.y + this.dy 43 | }); 44 | }; 45 | 46 | onNodeDragend = () => { 47 | this.node = undefined; 48 | }; 49 | 50 | render() { 51 | return ( 52 |
53 |
54 | this.graph = graph} 59 | onNodeDragstart={this.onNodeDragstart} 60 | onNodeDrag={this.onNodeDrag} 61 | onNodeDragend={this.onNodeDragend} 62 | /> 63 |
64 |
65 | ); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /demo/component/basic/layoutBase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, Layout, G6 } from 'g6-for-react'; 3 | require('@antv/g6/build/plugin.util.randomData'); 4 | 5 | const Util = G6.Util; 6 | const data = Util.createChainData(50); 7 | const setCol = 5; 8 | 9 | // 布局生成器 10 | const layoutCreator = col => nodes => { 11 | const hgap = 76; 12 | const vgap = 50; 13 | 14 | nodes.forEach(function(node, index) { 15 | if (parseInt(index / col) % 2 === 0) { 16 | node.x = (col - index % col) * hgap; 17 | } else { 18 | node.x = index % col * hgap + hgap; 19 | } 20 | node.y = parseInt(index / col) * vgap + vgap / 2; 21 | }); 22 | }; 23 | 24 | export default class LayoutBase extends React.Component { 25 | constructor(props) { 26 | super(props); 27 | this.state = { 28 | data 29 | }; 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 |
36 | 37 | 38 | 39 |
40 |
41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /demo/component/basic/quickNet.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class QuickNet extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200, 13 | label: '节点1' 14 | }, { 15 | id: 'node2', 16 | x: 300, 17 | y: 200, 18 | label: '节点2' 19 | }], 20 | edges: [{ 21 | target: 'node2', 22 | source: 'node1' 23 | }] 24 | } 25 | }; 26 | } 27 | 28 | render() { 29 | return ( 30 |
31 |
32 | 33 |
34 |
35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /demo/component/basic/quickTree.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tree } from 'g6-for-react'; 3 | 4 | export default class QuickTree extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | roots: [{ 10 | label: 'root', 11 | children: [{ 12 | label: 'child1', 13 | children: [{ 14 | label: 'child\n1.1' 15 | }] 16 | }, { 17 | label: 'child2' 18 | }] 19 | }] 20 | } 21 | }; 22 | } 23 | 24 | render() { 25 | return ( 26 |
27 |
28 | 29 |
30 |
31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /demo/component/basic/viewportFitView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class ViewportFitView extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200, 13 | size: 40, 14 | label: '节点1' 15 | }, { 16 | id: 'node2', 17 | x: 300, 18 | y: 200, 19 | color: '#eb2f96', 20 | label: '节点2' 21 | }], 22 | edges: [{ 23 | id: 'edge1', 24 | target: 'node2', 25 | source: 'node1' 26 | }] 27 | }, 28 | fitView: 'cc' 29 | }; 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 |
36 |
{ 37 | ['tl', 'lc', 'bl', 'cc', 'tc', 'tr', 'rc', 'br', 'bc', 'autoZoom'].map(fitView => ) 38 | }
39 | this.graph = graph}> 40 |
41 |
42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/component/basic/viewportFocus.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class ViewportFocus extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200, 13 | size: 40, 14 | label: '节点1' 15 | }, { 16 | id: 'node2', 17 | x: 300, 18 | y: 200, 19 | color: '#eb2f96', 20 | label: '节点2' 21 | }], 22 | edges: [{ 23 | id: 'edge1', 24 | target: 'node2', 25 | source: 'node1' 26 | }] 27 | } 28 | }; 29 | } 30 | 31 | render() { 32 | return ( 33 |
34 |
35 |
36 | this.graph = graph}> 37 |
38 |
39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /demo/component/basic/viewportTranslate.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | const width = window.innerWidth; 5 | const height = window.innerHeight; 6 | 7 | export default class ViewportTranslate extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | data: { 12 | nodes: [{ 13 | id: 'node1', 14 | x: 100, 15 | y: 200 16 | }, { 17 | id: 'node2', 18 | x: 300, 19 | y: 200 20 | }], 21 | edges: [{ 22 | id: 'edge1', 23 | target: 'node2', 24 | source: 'node1' 25 | }] 26 | } 27 | }; 28 | } 29 | 30 | onDrag = ev => { 31 | if (this.lastPoint) { 32 | this.graph.translate(ev.domX - this.lastPoint.x, ev.domY - this.lastPoint.y); 33 | } 34 | this.lastPoint = { 35 | x: ev.domX, 36 | y: ev.domY 37 | }; 38 | }; 39 | 40 | onDragend = () => { 41 | this.lastPoint = undefined; 42 | }; 43 | 44 | render() { 45 | return ( 46 |
47 |
48 | this.graph = graph} 53 | onDrag={this.onDrag} 54 | onDragend={this.onDragend} 55 | /> 56 |
57 |
58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /demo/component/basic/viewportZoom.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph } from 'g6-for-react'; 3 | 4 | export default class ViewportZoom extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: { 9 | nodes: [{ 10 | id: 'node1', 11 | x: 100, 12 | y: 200, 13 | size: 40, 14 | label: '节点1' 15 | }, { 16 | id: 'node2', 17 | x: 300, 18 | y: 200, 19 | color: '#eb2f96', 20 | label: '节点2' 21 | }], 22 | edges: [{ 23 | id: 'edge1', 24 | target: 'node2', 25 | source: 'node1' 26 | }] 27 | } 28 | }; 29 | } 30 | 31 | render() { 32 | return ( 33 |
34 |
35 |
{ 36 | [0.2, 0.5, 1, 1.5, 2].map(ratio => ) 37 | }
38 | this.graph = graph}> 39 |
40 |
41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /demo/component/gallery/codeTree.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, NodeMapper, G6 } from 'g6-for-react'; 3 | 4 | const getTreeData = function getTreeData(x1, y1, angle, depth) { 5 | const nodes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : []; 6 | const edges = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : []; 7 | 8 | const deg_to_rad = Math.PI / 180; 9 | if (depth !== 0) { 10 | const x2 = x1 + Math.cos(angle * deg_to_rad) * depth * 10.0; 11 | const y2 = y1 + Math.sin(angle * deg_to_rad) * depth * 10.0; 12 | const id1 = G6.Util.guid(); 13 | const id2 = G6.Util.guid(); 14 | nodes.push({ 15 | id: id1, 16 | x: x1, 17 | y: y1 18 | }); 19 | nodes.push({ 20 | id: id2, 21 | x: x2, 22 | y: y2 23 | }); 24 | edges.push({ 25 | source: id1, 26 | target: id2 27 | }); 28 | getTreeData(x2, y2, angle - 30, depth - 1, nodes, edges); 29 | getTreeData(x2, y2, angle + 30, depth - 1, nodes, edges); 30 | } 31 | return { 32 | nodes: nodes, 33 | edges: edges 34 | }; 35 | }; 36 | 37 | export default class CodeTree extends React.Component { 38 | constructor(props) { 39 | super(props); 40 | this.state = { 41 | data: getTreeData(0, 0, -90, 9) 42 | }; 43 | } 44 | 45 | render() { 46 | return ( 47 |
48 |
49 | 50 | 51 | 52 |
53 |
54 | ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /demo/component/gallery/index.js: -------------------------------------------------------------------------------- 1 | import CodeTree from './codeTree'; 2 | import TreeCompact from './treeCompact'; 3 | import TreeDendrogram from './treeDendrogram'; 4 | import TreeIndented from './treeIndented'; 5 | import TreeMindMap from './treeMindMap'; 6 | import XiaoMi from './xiaomi'; 7 | import University from './university'; 8 | 9 | export default { 10 | '画廊': { 11 | '函数生成树': CodeTree, 12 | '紧凑树': TreeCompact, 13 | '系统树': TreeDendrogram, 14 | '生态树': TreeIndented, 15 | '脑树': TreeMindMap, 16 | '小米关系图谱': XiaoMi, 17 | '浙江省各城市大学分布': University 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo/component/gallery/treeCompact.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tree, NodeMapper, EdgeMapper, G6 } from 'g6-for-react'; 3 | 4 | G6.registerNode('treeNode', { 5 | anchor: [[0, 0.5], [1, 0.5]] 6 | }); 7 | G6.registerEdge('smooth', { 8 | getPath: function getPath(item) { 9 | var points = item.getPoints(); 10 | var start = points[0]; 11 | var end = points[points.length - 1]; 12 | var hgap = Math.abs(end.x - start.x); 13 | if (end.x > start.x) { 14 | return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]]; 15 | } 16 | return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]]; 17 | } 18 | }); 19 | 20 | const layout = new G6.Layouts.CompactBoxTree({ 21 | // direction: 'LR', // 方向（LR/RL/H/TB/BT/V） 22 | getHGap: function getHGap() /* d */ { 23 | // 横向间距 24 | return 100; 25 | }, 26 | getVGap: function getVGap() /* d */ { 27 | // 竖向间距 28 | return 10; 29 | } 30 | }); 31 | 32 | export default class TreeCompact extends React.Component { 33 | constructor(props) { 34 | super(props); 35 | this.state = { 36 | data: { 37 | roots: [{ 38 | name: "Modeling Methods", 39 | children: [ 40 | { 41 | name: "Classification", 42 | children: [ 43 | { name: "Logistic regression" }, 44 | { name: "Linear discriminant analysis" }, 45 | { name: "Rules" }, 46 | { name: "Decision trees" }, 47 | { name: "Naive Bayes" }, 48 | { name: "K nearest neighbor" }, 49 | { name: "Probabilistic neural network" }, 50 | { name: "Support vector machine" } 51 | ] 52 | }, 53 | { 54 | name: "Consensus", 55 | children: [ 56 | { 57 | name: "Models diversity", 58 | children: [ 59 | { name: "Different initializations" }, 60 | { name: "Different parameter choices" }, 61 | { name: "Different architectures" }, 62 | { name: "Different modeling methods" }, 63 | { name: "Different training sets" }, 64 | { name: "Different feature sets" } 65 | ] 66 | }, 67 | { 68 | name: "Methods", 69 | children: [ 70 | { name: "Classifier selection" }, 71 | { name: "Classifier fusion" } 72 | ] 73 | }, 74 | { 75 | name: "Common", 76 | children: [ 77 | { name: "Bagging" }, 78 | { name: "Boosting" }, 79 | { name: "AdaBoost" } 80 | ] 81 | } 82 | ] 83 | }, 84 | { 85 | name: "Regression", 86 | children: [ 87 | { name: "Multiple linear regression" }, 88 | { name: "Partial least squares" }, 89 | { name: "Multi-layer feedforward neural network" }, 90 | { name: "General regression neural network" }, 91 | { name: "Support vector regression" } 92 | ] 93 | } 94 | ] 95 | }] 96 | } 97 | }; 98 | } 99 | 100 | onAfterchange = (ev, tree) => { 101 | tree.getNodes().forEach(node => { 102 | const label = node.getLabel(); 103 | const keyShape = node.getKeyShape(); 104 | const children = node.getChildren(); 105 | const box = keyShape.getBBox(); 106 | const labelBox = label.getBBox(); 107 | let dx = (box.maxX - box.minX + labelBox.maxX - labelBox.minX) / 2 + 8; 108 | const dy = 0; 109 | if (children.length != 0) { 110 | dx = -dx; 111 | } 112 | label.translate(dx, dy); 113 | }); 114 | tree.draw(); 115 | }; 116 | 117 | render() { 118 | return ( 119 |
120 |
121 | 129 | obj.name}/> 130 | 131 | 132 |
133 |
134 | ); 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /demo/component/gallery/treeDendrogram.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tree, NodeMapper, EdgeMapper, G6 } from 'g6-for-react'; 3 | 4 | G6.registerNode('treeNode', { 5 | anchor: [[0, 0.5], [1, 0.5]] 6 | }); 7 | G6.registerEdge('smooth', { 8 | getPath: function getPath(item) { 9 | var points = item.getPoints(); 10 | var start = points[0]; 11 | var end = points[points.length - 1]; 12 | var hgap = Math.abs(end.x - start.x); 13 | if (end.x > start.x) { 14 | return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]]; 15 | } 16 | return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]]; 17 | } 18 | }); 19 | 20 | const layout = new G6.Layouts.Dendrogram({ 21 | "direction": "LR", 22 | "nodeSize": 20, 23 | "rankSep": 400 24 | }); 25 | 26 | export default class TreeDendrogram extends React.Component { 27 | constructor(props) { 28 | super(props); 29 | this.state = { 30 | data: { 31 | roots: [{ 32 | name: "Modeling Methods", 33 | children: [ 34 | { 35 | name: "Classification", 36 | children: [ 37 | { name: "Logistic regression" }, 38 | { name: "Linear discriminant analysis" }, 39 | { name: "Rules" }, 40 | { name: "Decision trees" }, 41 | { name: "Naive Bayes" }, 42 | { name: "K nearest neighbor" }, 43 | { name: "Probabilistic neural network" }, 44 | { name: "Support vector machine" } 45 | ] 46 | }, 47 | { 48 | name: "Consensus", 49 | children: [ 50 | { 51 | name: "Models diversity", 52 | children: [ 53 | { name: "Different initializations" }, 54 | { name: "Different parameter choices" }, 55 | { name: "Different architectures" }, 56 | { name: "Different modeling methods" }, 57 | { name: "Different training sets" }, 58 | { name: "Different feature sets" } 59 | ] 60 | }, 61 | { 62 | name: "Methods", 63 | children: [ 64 | { name: "Classifier selection" }, 65 | { name: "Classifier fusion" } 66 | ] 67 | }, 68 | { 69 | name: "Common", 70 | children: [ 71 | { name: "Bagging" }, 72 | { name: "Boosting" }, 73 | { name: "AdaBoost" } 74 | ] 75 | } 76 | ] 77 | }, 78 | { 79 | name: "Regression", 80 | children: [ 81 | { name: "Multiple linear regression" }, 82 | { name: "Partial least squares" }, 83 | { name: "Multi-layer feedforward neural network" }, 84 | { name: "General regression neural network" }, 85 | { name: "Support vector regression" } 86 | ] 87 | } 88 | ] 89 | }] 90 | } 91 | }; 92 | } 93 | 94 | onAfterchange = (ev, tree) => { 95 | tree.getNodes().forEach(node => { 96 | const label = node.getLabel(); 97 | const keyShape = node.getKeyShape(); 98 | const children = node.getChildren(); 99 | const box = keyShape.getBBox(); 100 | const labelBox = label.getBBox(); 101 | let dx = (box.maxX - box.minX + labelBox.maxX - labelBox.minX) / 2 + 8; 102 | const dy = 0; 103 | if (children.length != 0) { 104 | dx = -dx; 105 | } 106 | label.translate(dx, dy); 107 | }); 108 | tree.draw(); 109 | }; 110 | 111 | render() { 112 | return ( 113 |
114 |
115 | 124 | obj.name}/> 125 | 126 | 127 |
128 |
129 | ); 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /demo/component/gallery/treeIndented.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tree, NodeMapper, EdgeMapper, G6 } from 'g6-for-react'; 3 | 4 | G6.registerNode('treeNode', { 5 | anchor: [[0, 0.5], [1, 0.5]] 6 | }); 7 | G6.registerEdge('VH', { 8 | getPath: function getPath(item) { 9 | var points = item.getPoints(); 10 | var start = points[0]; 11 | var end = points[points.length - 1]; 12 | return [['M', start.x, start.y], ['L', start.x, end.y], ['L', end.x, end.y]]; 13 | } 14 | }); 15 | 16 | const layout = new G6.Layouts.IndentedTree({ 17 | direction: 'LR', // 方向（LR/RL/H） 18 | indent: 30, // 缩进量 19 | getVGap: function getVGap() /* d */ { 20 | // 竖向间距 21 | return 4; 22 | } 23 | }); 24 | 25 | export default class TreeIndented extends React.Component { 26 | constructor(props) { 27 | super(props); 28 | this.state = { 29 | data: { 30 | roots: [{ 31 | name: "Modeling Methods", 32 | children: [ 33 | { 34 | name: "Classification", 35 | children: [ 36 | { name: "Logistic regression" }, 37 | { name: "Linear discriminant analysis" }, 38 | { name: "Rules" }, 39 | { name: "Decision trees" }, 40 | { name: "Naive Bayes" }, 41 | { name: "K nearest neighbor" }, 42 | { name: "Probabilistic neural network" }, 43 | { name: "Support vector machine" } 44 | ] 45 | }, 46 | { 47 | name: "Consensus", 48 | children: [ 49 | { 50 | name: "Models diversity", 51 | children: [ 52 | { name: "Different initializations" }, 53 | { name: "Different parameter choices" }, 54 | { name: "Different architectures" }, 55 | { name: "Different modeling methods" }, 56 | { name: "Different training sets" }, 57 | { name: "Different feature sets" } 58 | ] 59 | }, 60 | { 61 | name: "Methods", 62 | children: [ 63 | { name: "Classifier selection" }, 64 | { name: "Classifier fusion" } 65 | ] 66 | }, 67 | { 68 | name: "Common", 69 | children: [ 70 | { name: "Bagging" }, 71 | { name: "Boosting" }, 72 | { name: "AdaBoost" } 73 | ] 74 | } 75 | ] 76 | }, 77 | { 78 | name: "Regression", 79 | children: [ 80 | { name: "Multiple linear regression" }, 81 | { name: "Partial least squares" }, 82 | { name: "Multi-layer feedforward neural network" }, 83 | { name: "General regression neural network" }, 84 | { name: "Support vector regression" } 85 | ] 86 | } 87 | ] 88 | }] 89 | } 90 | }; 91 | } 92 | 93 | onAfterchange = (ev, tree) => { 94 | tree.getNodes().forEach(node => { 95 | const label = node.getLabel(); 96 | const keyShape = node.getKeyShape(); 97 | const children = node.getChildren(); 98 | const box = keyShape.getBBox(); 99 | const labelBox = label.getBBox(); 100 | let dx = (box.maxX - box.minX + labelBox.maxX - labelBox.minX) / 2 + 8; 101 | const dy = 0; 102 | if (children.length != 0) { 103 | dx = -dx; 104 | } 105 | label.translate(dx, dy); 106 | }); 107 | tree.draw(); 108 | }; 109 | 110 | render() { 111 | return ( 112 |
113 |
114 | 122 | obj.name}/> 123 | 124 | 125 |
126 |
127 | ); 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /demo/component/gallery/treeMindMap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tree, NodeMapper, EdgeMapper, G6 } from 'g6-for-react'; 3 | 4 | // 注册脑图节点 5 | G6.registerNode('mindNode', { 6 | anchor: [[0, 0.5], [1, 0.5]] 7 | }); 8 | // 注册脑图边 9 | G6.registerEdge('mindEdge', { 10 | getPath: function getPath(item) { 11 | var points = item.getPoints(); 12 | var start = points[0]; 13 | var end = points[points.length - 1]; 14 | var hgap = Math.abs(end.x - start.x); 15 | if (end.x > start.x) { 16 | return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]]; 17 | } 18 | return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]]; 19 | } 20 | }); 21 | 22 | const layout = new G6.Layouts.Mindmap({ 23 | direction: 'H', // 方向（LR/RL/H/TB/BT/V） 24 | getHGap: function getHGap() /* d */ { 25 | // 横向间距 26 | return 100; 27 | }, 28 | getVGap: function getVGap() /* d */ { 29 | // 竖向间距 30 | return 10; 31 | } 32 | }); 33 | 34 | export default class TreeMindMap extends React.Component { 35 | constructor(props) { 36 | super(props); 37 | this.state = { 38 | data: { 39 | roots: [{ 40 | name: "Modeling Methods", 41 | children: [ 42 | { 43 | name: "Classification", 44 | children: [ 45 | { name: "Logistic regression" }, 46 | { name: "Linear discriminant analysis" }, 47 | { name: "Rules" }, 48 | { name: "Decision trees" }, 49 | { name: "Naive Bayes" }, 50 | { name: "K nearest neighbor" }, 51 | { name: "Probabilistic neural network" }, 52 | { name: "Support vector machine" } 53 | ] 54 | }, 55 | { 56 | name: "Consensus", 57 | children: [ 58 | { 59 | name: "Models diversity", 60 | children: [ 61 | { name: "Different initializations" }, 62 | { name: "Different parameter choices" }, 63 | { name: "Different architectures" }, 64 | { name: "Different modeling methods" }, 65 | { name: "Different training sets" }, 66 | { name: "Different feature sets" } 67 | ] 68 | }, 69 | { 70 | name: "Methods", 71 | children: [ 72 | { name: "Classifier selection" }, 73 | { name: "Classifier fusion" } 74 | ] 75 | }, 76 | { 77 | name: "Common", 78 | children: [ 79 | { name: "Bagging" }, 80 | { name: "Boosting" }, 81 | { name: "AdaBoost" } 82 | ] 83 | } 84 | ] 85 | }, 86 | { 87 | name: "Regression", 88 | children: [ 89 | { name: "Multiple linear regression" }, 90 | { name: "Partial least squares" }, 91 | { name: "Multi-layer feedforward neural network" }, 92 | { name: "General regression neural network" }, 93 | { name: "Support vector regression" } 94 | ] 95 | } 96 | ] 97 | }] 98 | } 99 | }; 100 | } 101 | 102 | onAfterchange = (ev, tree) => { 103 | tree.getNodes().forEach(node => { 104 | const model = node.getModel(); 105 | const label = node.getLabel(); 106 | const keyShape = node.getKeyShape(); 107 | const parent = node.getParent(); 108 | const box = keyShape.getBBox(); 109 | const labelBox = label.getBBox(); 110 | let dx = (box.maxX - box.minX + labelBox.maxX - labelBox.minX) / 2 + 8; 111 | let dy = (box.maxY - box.minY) / 2 + 8; 112 | if (parent) { 113 | var parentModel = parent.getModel(); 114 | if (parentModel.x > model.x) { 115 | dx = -dx; 116 | } 117 | dy = 0; 118 | } else { 119 | dx = 0; 120 | } 121 | label.translate(dx, dy); 122 | }); 123 | tree.draw(); 124 | }; 125 | 126 | render() { 127 | return ( 128 |
129 |
130 | 138 | ({ 139 | text: obj.name, 140 | stroke: '#fff', 141 | lineWidth: 3 142 | })}/> 143 | 144 | 145 |
146 |
147 | ); 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /demo/component/gallery/university.js: -------------------------------------------------------------------------------- 1 | import * as d3 from 'd3'; 2 | import React from 'react'; 3 | import { Tree, G6, NodeMapper, EdgeMapper } from 'g6-for-react'; 4 | import data from './university.json'; 5 | require('@antv/g6/build/plugin.tool.d3.mapper'); 6 | 7 | const { forceSimulation, forceLink, forceManyBody, forceY } = d3; 8 | const Util = G6.Util; 9 | 10 | const Mapper = G6.Plugins['tool.d3.mapper']; 11 | const nodeSizeMapper = new Mapper('node', '办学层次', 'color', ['#4BA4C4', '#F0D79F', '#FF8B33']); 12 | 13 | export default class University extends React.Component { 14 | constructor(props) { 15 | super(props); 16 | this.state = { 17 | data 18 | }; 19 | } 20 | 21 | layout = (...args) => { 22 | const [,tree] = args; 23 | const nodes = tree.getNodes().map(function(node) { 24 | return node.getModel(); 25 | }); 26 | const edges = tree.getEdges().map(function(edge) { 27 | return Util.mix({}, edge.getModel()); 28 | }); 29 | this.simulation && this.simulation.stop(); 30 | this.simulation = forceSimulation(nodes).force('charge', forceManyBody()).force('link', forceLink(edges).id(function(d) { 31 | return d.id; 32 | }).distance(20).strength(1)).force('y', forceY()).on('tick', function() { 33 | tree.updateNodePosition(); 34 | }); 35 | } 36 | 37 | // 鼠标移入节点显示 label 38 | tryHideLabel = node => { 39 | const model = node.getModel(); 40 | const label = node.getLabel(); 41 | const labelBox = label.getBBox(); 42 | if (labelBox.maxX - labelBox.minX > model.size) { 43 | label.hide(); 44 | this.tree.draw(); 45 | } 46 | } 47 | 48 | onDragstart = () => { 49 | this.tree.css({ 50 | cursor: '-webkit-grabbing' 51 | }); 52 | }; 53 | 54 | onDrag = ev => { 55 | if (this.lastPoint) { 56 | this.tree.translate(ev.domX - this.lastPoint.x, ev.domY - this.lastPoint.y); 57 | } 58 | this.lastPoint = { 59 | x: ev.domX, 60 | y: ev.domY 61 | }; 62 | }; 63 | 64 | onDragend = () => { 65 | this.lastPoint = undefined; 66 | this.tree.css({ 67 | cursor: '-webkit-grab' 68 | }); 69 | }; 70 | 71 | onCanvasMouseenter = () => { 72 | this.tree.css({ 73 | cursor: '-webkit-grabbing' 74 | }); 75 | }; 76 | 77 | onCanvasMouseleave = () => { 78 | this.lastPoint = undefined; 79 | }; 80 | 81 | onNodeMouseenter = ev => { 82 | const item = ev.item; 83 | this.tree.toFront(item); 84 | item.getLabel().show(); 85 | this.tree.draw(); 86 | }; 87 | 88 | onNodeMouseleave = ev => { 89 | const item = ev.item; 90 | this.tryHideLabel(item); 91 | }; 92 | 93 | render() { 94 | return ( 95 |
96 |
97 | this.tree = tree} 103 | onDragstart={this.onDragstart} 104 | onDrag={this.onDrag} 105 | onDragend={this.onDragend} 106 | onCanvasMouseleave={this.onCanvasMouseleave} 107 | onCanvasMouseenter={this.onCanvasMouseenter} 108 | onNodeMouseenter={this.onNodeMouseenter} 109 | onNodeMouseleave={this.onNodeMouseleave} 110 | > 111 | ({ 113 | stroke: null 114 | })} 115 | size={10} 116 | label={model => model.name} 117 | /> 118 | ({ 120 | strokeOpacity: 0.6 121 | })} 122 | /> 123 | 124 |
125 |
126 | ); 127 | } 128 | 129 | componentDidMount() { 130 | this.tree.translate(this.tree.getWidth() / 2, this.tree.getHeight() / 2); 131 | const nodes = this.tree.getNodes(); 132 | 133 | nodes.forEach(node => { 134 | this.tryHideLabel(node); 135 | }); 136 | } 137 | 138 | componentWillUnmount() { 139 | this.simulation.stop(); 140 | this.simulation = null; 141 | } 142 | } -------------------------------------------------------------------------------- /demo/component/gallery/xiaomi.js: -------------------------------------------------------------------------------- 1 | import * as d3 from 'd3'; 2 | import React from 'react'; 3 | import { Graph, G6, NodeMapper, EdgeMapper } from 'g6-for-react'; 4 | import data from './xiaomi.json'; 5 | require('@antv/g6/build/plugin.tool.d3.mapper'); 6 | 7 | const { forceSimulation, forceLink, forceManyBody, forceX, forceY, forceCollide } = d3; 8 | 9 | const Mapper = G6.Plugins['tool.d3.mapper']; 10 | const nodeSizeMapper = new Mapper('node', 'degree', 'size', [8, 48], { 11 | legendCfg: null 12 | }); 13 | const nodeColorMapper = new Mapper('node', 'type', 'color', ['#e18826', '#002a67']); 14 | 15 | export default class XiaoMi extends React.Component { 16 | constructor(props) { 17 | super(props); 18 | this.state = { 19 | data 20 | }; 21 | } 22 | 23 | layout = (nodes, edges, graph) => { 24 | if (this.simulation) { 25 | this.simulation.alphaTarget(0.3).restart(); 26 | } else { 27 | this.simulation = forceSimulation(nodes).force('charge', forceManyBody().strength(-100)).force('link', forceLink(edges).id(function(model) { 28 | return model.id; 29 | })).force('collision', forceCollide().radius(model => model.size / 2 * 1.2)).force('y', forceY()).force('x', forceX()).on('tick', function() { 30 | graph.updateNodePosition(); 31 | }); 32 | } 33 | } 34 | 35 | // 鼠标移入节点显示 label 36 | tryHideLabel = node => { 37 | const model = node.getModel(); 38 | const label = node.getLabel(); 39 | const labelBox = label.getBBox(); 40 | if (labelBox.maxX - labelBox.minX > model.size) { 41 | label.hide(); 42 | this.graph.draw(); 43 | } 44 | } 45 | 46 | resetState = () => { 47 | if (this.subject) { 48 | this.simulation.alphaTarget(0); 49 | this.subject.fx = null; 50 | this.subject.fy = null; 51 | this.subject = null; 52 | } 53 | }; 54 | 55 | onMousedown = ev => { 56 | if (ev.domEvent.button === 0) { 57 | this.subject = this.simulation.find(ev.x, ev.y); 58 | } 59 | }; 60 | 61 | onDragstart = () => { 62 | this.subject && this.simulation.alphaTarget(0.3).restart(); 63 | }; 64 | 65 | onDrag = ev => { 66 | if (this.subject) { 67 | this.subject.fx = ev.x; 68 | this.subject.fy = ev.y; 69 | } 70 | }; 71 | 72 | onNodeMouseenter = ev => { 73 | const item = ev.item; 74 | this.graph.toFront(item); 75 | item.getLabel().show(); 76 | this.graph.draw(); 77 | }; 78 | 79 | onNodeMouseleave = ev => { 80 | const item = ev.item; 81 | this.tryHideLabel(item); 82 | }; 83 | 84 | render() { 85 | return ( 86 |
87 |
88 | this.graph = graph} 97 | onMousedown={this.onMousedown} 98 | onDragstart={this.onDragstart} 99 | onDrag={this.onDrag} 100 | onMouseup={this.resetState} 101 | onCanvasMouseleave={this.resetState} 102 | onNodeMouseenter={this.onNodeMouseenter} 103 | onNodeMouseleave={this.onNodeMouseleave} 104 | > 105 | model.type === 'Company' ? { 107 | fill: '#e18826', 108 | shadowColor: 'rgba(0,0,0, 0.3)', 109 | shadowBlur: 3, 110 | shadowOffsetX: 2, 111 | shadowOffsetY: 2, 112 | stroke: null 113 | } : { 114 | fill: '#002a67', 115 | shadowColor: 'rgba(0,0,0, 0.3)', 116 | shadowBlur: 3, 117 | shadowOffsetX: 3, 118 | shadowOffsetY: 5, 119 | stroke: null 120 | }} 121 | label={model => ({ 122 | text: model.properties['name'], 123 | stroke: null, 124 | fill: '#fff' 125 | })} 126 | /> 127 | ({ 129 | stroke: '#b3b3b3', 130 | lineWidth: 2 131 | })} 132 | /> 133 | 134 |
135 |
136 | ); 137 | } 138 | 139 | componentDidMount() { 140 | this.graph.translate(this.graph.getWidth() / 2, this.graph.getHeight() / 2); 141 | const nodes = this.graph.getNodes(); 142 | const edges = this.graph.getEdges(); 143 | 144 | edges.forEach(edge => { 145 | edge.getGraphicGroup().set('capture', false); // 移除边的捕获，提升图形拾取效率 146 | }); 147 | 148 | nodes.forEach(node => { 149 | this.tryHideLabel(node); 150 | }); 151 | } 152 | 153 | componentWillUnmount() { 154 | this.simulation.stop(); 155 | this.simulation = null; 156 | } 157 | } -------------------------------------------------------------------------------- /demo/component/index.js: -------------------------------------------------------------------------------- 1 | import basic from './basic'; 2 | import plugin from './plugin'; 3 | import gallery from './gallery'; 4 | 5 | export default { 6 | ...gallery, 7 | ...plugin, 8 | ...basic 9 | }; -------------------------------------------------------------------------------- /demo/component/plugin/archimeddeanSpiral.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6, NodeMapper } from 'g6-for-react'; 3 | require('@antv/g6/build/plugin.layout.archimeddeanSpiral'); 4 | require('@antv/g6/build/plugin.util.randomData'); 5 | 6 | const Plugin = G6.Plugins["layout.archimeddeanSpiral"]; 7 | const plugin = new Plugin(); 8 | const Util = G6.Util; 9 | 10 | export default class ArchimeddeanSpiral extends React.Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | data: Util.createChainData(160) 15 | }; 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |
22 | 23 | 24 | 25 |
26 |
27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /demo/component/plugin/circle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6 } from 'g6-for-react'; 3 | require('@antv/g6/build/plugin.layout.circle'); 4 | require('@antv/g6/build/plugin.util.randomData'); 5 | 6 | const Plugin = G6.Plugins["layout.circle"]; 7 | const plugin = new Plugin(); 8 | const Util = G6.Util; 9 | 10 | export default class Circle extends React.Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | data: Util.createCyclicData(30) 15 | }; 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |
22 | 23 | 24 |
25 |
26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo/component/plugin/index.js: -------------------------------------------------------------------------------- 1 | import QuadraticCurve from './quadraticCurve'; 2 | import Minimap from './minimap'; 3 | import MaxSpanningForest from './maxSpanningForest'; 4 | import Circle from './circle'; 5 | import ArchimeddeanSpiral from './archimeddeanSpiral'; 6 | 7 | export default { 8 | '插件': { 9 | '阿基米德螺线': ArchimeddeanSpiral, 10 | '二阶贝塞尔曲线': QuadraticCurve, 11 | '缩略图': Minimap, 12 | '最大生成森林': MaxSpanningForest, 13 | '圆形布局': Circle 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo/component/plugin/maxSpanningForest.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6 } from 'g6-for-react'; 3 | require('@antv/g6/build/plugin.template.maxSpanningForest'); 4 | 5 | const Plugin = G6.Plugins["template.maxSpanningForest"]; 6 | const plugin = new Plugin(); 7 | 8 | export default class MaxSpanningForest extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | this.state = { 12 | data: { 13 | nodes: [{ 14 | id: 0, 15 | weight: 42.194703980779714, 16 | label: 'name0' 17 | }, { 18 | id: 1, 19 | weight: 72.86640536738712, 20 | label: 'name1' 21 | }, { 22 | id: 2, 23 | weight: 82.29983433131834, 24 | label: 'name2' 25 | }, { 26 | id: 3, 27 | weight: 23.204885400175424, 28 | label: 'name3' 29 | }, { 30 | id: 4, 31 | weight: 100.84964997048472, 32 | label: 'name4' 33 | }, { 34 | id: 5, 35 | weight: 72.90971413062293, 36 | label: 'name5' 37 | }, { 38 | id: 6, 39 | weight: 15.029159176990348, 40 | label: 'name6' 41 | }, { 42 | id: 7, 43 | weight: 24.38308784826313, 44 | label: 'name7' 45 | }, { 46 | id: 8, 47 | weight: 78.00164088714241, 48 | label: 'name8' 49 | }, { 50 | id: 9, 51 | weight: 53.580641600279954, 52 | label: 'name9' 53 | }], 54 | edges: [{ 55 | id: '1-6', 56 | source: 1, 57 | target: 6, 58 | weight: 89.69805016254719 59 | }, { 60 | id: '5-3', 61 | source: 5, 62 | target: 3, 63 | weight: 86.31397440928264 64 | }, { 65 | id: '0-5', 66 | source: 0, 67 | target: 5, 68 | weight: 76.94877138495532 69 | }, { 70 | id: '5-9', 71 | source: 5, 72 | target: 9, 73 | weight: 63.754902669930644 74 | }, { 75 | id: '2-7', 76 | source: 2, 77 | target: 7, 78 | weight: 4.449707271000913 79 | }, { 80 | id: '3-4', 81 | source: 3, 82 | target: 4, 83 | weight: 36.97483959651564 84 | }, { 85 | id: '9-3', 86 | source: 9, 87 | target: 3, 88 | weight: 50.354719513581635 89 | }, { 90 | id: '6-4', 91 | source: 6, 92 | target: 4, 93 | weight: 10.02660118138856 94 | }, { 95 | id: '8-3', 96 | source: 8, 97 | target: 3, 98 | weight: 13 99 | }, { 100 | id: '8-4', 101 | source: 8, 102 | target: 4, 103 | weight: 13 104 | }, { 105 | id: '2-1', 106 | source: 2, 107 | target: 1, 108 | weight: 13 109 | }, { 110 | id: '4-5', 111 | source: 4, 112 | target: 5, 113 | weight: 60 114 | }, { 115 | id: '4-8', 116 | source: 4, 117 | target: 8, 118 | weight: 63 119 | }, { 120 | id: '8-5', 121 | source: 8, 122 | target: 5, 123 | weight: 13 124 | }, { 125 | id: '9-2', 126 | source: 9, 127 | target: 2, 128 | weight: 13 129 | }, { 130 | id: '1-8', 131 | source: 1, 132 | target: 8, 133 | weight: 19.02660118138856 134 | }, { 135 | id: '4-2', 136 | source: 4, 137 | target: 2, 138 | weight: 50.02660118138856 139 | }] 140 | } 141 | }; 142 | } 143 | 144 | render() { 145 | return ( 146 |
147 |
148 | 149 | 150 |
151 |
152 | ); 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /demo/component/plugin/minimap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, G6 } from 'g6-for-react'; 3 | require('@antv/g6/build/plugin.tool.minimap'); 4 | 5 | const Plugin = G6.Plugins["tool.minimap"]; 6 | const plugin = new Plugin({ 7 | container: 'minimap', 8 | width: 180, 9 | height: 120 10 | }); 11 | 12 | export default class Minimap extends React.Component { 13 | constructor(props) { 14 | super(props); 15 | this.state = { 16 | data: { 17 | nodes: [{ 18 | id: 'node0', 19 | x: -100, 20 | y: 200 21 | }, { 22 | id: 'node1', 23 | x: 100, 24 | y: 200 25 | }, { 26 | id: 'node2', 27 | x: 300, 28 | y: 200 29 | }, { 30 | id: 'node3', 31 | x: 600, 32 | y: 200 33 | }], 34 | edges: [{ 35 | target: 'node0', 36 | source: 'node1' 37 | }, { 38 | target: 'node2', 39 | source: 'node1' 40 | }, { 41 | target: 'node2', 42 | source: 'node3' 43 | }] 44 | } 45 | }; 46 | } 47 | 48 | render() { 49 | return ( 50 |
51 |
52 |
57 | 58 | 59 |
60 |
61 | ); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /demo/component/plugin/quadraticCurve.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Graph, EdgeMapper } from 'g6-for-react'; 3 | require('@antv/g6/build/plugin.edge.quadraticCurve'); 4 | 5 | export default class QuadraticCurve extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | data: { 10 | nodes: [{ 11 | id: 'node1', 12 | x: 100, 13 | y: 200 14 | }, { 15 | id: 'node2', 16 | x: 300, 17 | y: 200 18 | }], 19 | edges: [{ 20 | target: 'node2', 21 | source: 'node1', 22 | shape: 'quadraticCurve' 23 | }, { 24 | target: 'node1', 25 | source: 'node2', 26 | shape: 'quadraticCurve' 27 | }] 28 | } 29 | }; 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 |
36 | 37 | 38 | 39 |
40 |
41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /demo/container/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link, withRouter } from 'react-router-dom'; 3 | import components from '../component/index'; 4 | 5 | class App extends React.Component { 6 | 7 | renderList() { 8 | const items = Object.keys(components).map(key => { 9 | const group = components[key]; 10 | const list = Object.keys(group).map(c => { 11 | const entry = group[c]; 12 | 13 | return ( 14 |
  • 15 | {c} 16 |
    • 17 | ); 18 | }); 19 | 20 | return ( 21 |
    22 |

    {key}

    23 | 26 |
    27 | ); 28 | }); 29 | 30 | return ( 31 |
    32 |

    components

    33 | {items} 34 |
    35 | ); 36 | } 37 | 38 | renderPageDetail() { 39 | const { location, match } = this.props; 40 | const { query } = location; 41 | const { group, page } = query; 42 | const { params } = match; 43 | 44 | return ( 45 |
    46 |

    Back to homepage

    47 |

    {page}

    48 | {components[group] && components[group][page] ? React.createElement(components[group][page]) : null} 49 |
    50 | ); 51 | } 52 | 53 | render() { 54 | const { location } = this.props; 55 | 56 | if (!location.query || !location.query.page) { 57 | return this.renderList(); 58 | } 59 | 60 | return this.renderPageDetail(); 61 | } 62 | } 63 | 64 | export default withRouter(App); -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | g6-for-react Demo 4 | 5 | 6 |
    7 |
    8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | import 'core-js/es6/set'; 2 | import 'core-js/es6/map'; 3 | import 'whatwg-fetch'; 4 | 5 | import React from 'react'; 6 | import ReactDOM from 'react-dom'; 7 | import { BrowserRouter as Router, Route } from 'react-router-dom'; 8 | import App from './container/App'; 9 | 10 | ReactDOM.render(( 11 | 12 | 13 | 14 | ), document.getElementById('root')); -------------------------------------------------------------------------------- /demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | context: __dirname, 6 | devtool: '#inline-source-map', 7 | entry: [ 8 | './index.js', 9 | ], 10 | output: { 11 | path: path.join(__dirname, 'build'), 12 | filename: 'bundle.js', 13 | }, 14 | plugins: [ 15 | new webpack.LoaderOptionsPlugin({ 16 | debug: true 17 | }) 18 | // new webpack.HotModuleReplacementPlugin(), 19 | // new webpack.NoErrorsPlugin() 20 | ], 21 | resolve: { 22 | extensions: ['.js', '.jsx'], 23 | alias: { 24 | 'g6-for-react': path.join(__dirname, '..', 'src/index.jsx'), 25 | }, 26 | }, 27 | module: { 28 | loaders: [{ 29 | test: /\.(js|jsx)$/, 30 | loaders: ['babel-loader'], 31 | include: [ 32 | __dirname, 33 | path.join(__dirname, '..', 'src'), 34 | ], 35 | }], 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /dist/16b90df38d2b2755cb22.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"affda1b50c0a96d99cb7","c":{"main":true}} -------------------------------------------------------------------------------- /dist/3c4439b5cf7895427113.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"2ba337543f6bbf1449a0","c":{"main":true}} -------------------------------------------------------------------------------- /dist/6201ece0d47ea12730d0.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"cd131dd65bb92cc56e65","c":{"main":true}} -------------------------------------------------------------------------------- /dist/6294501d302255885fa4.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"6201ece0d47ea12730d0","c":{"main":true}} -------------------------------------------------------------------------------- /dist/6d5c7a515dd2eeae925f.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"3c4439b5cf7895427113","c":{"main":true}} -------------------------------------------------------------------------------- /dist/6df61dc3edce25972a35.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"d20b7c0772f614ead422","c":{"main":true}} -------------------------------------------------------------------------------- /dist/8b4433c9b2f9b5e39f40.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"9ccb5ff6ed82f89eb753","c":{"main":true}} -------------------------------------------------------------------------------- /dist/8df8af40cef15d5b6962.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"ca422d2851f20f63c81f","c":{"main":true}} -------------------------------------------------------------------------------- /dist/94c376cd3f6e393f4b03.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"cfb4cb53265eb603ca0e","c":{"main":true}} -------------------------------------------------------------------------------- /dist/9ccb5ff6ed82f89eb753.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"f51fc46545c8f7f2eb38","c":{"main":true}} -------------------------------------------------------------------------------- /dist/9fcfa60e2a46f808ddf8.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"cb53c6d90020e9c6bb5a","c":{"main":true}} -------------------------------------------------------------------------------- /dist/a421e7f5e1124178db81.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"8df8af40cef15d5b6962","c":{"main":true}} -------------------------------------------------------------------------------- /dist/affda1b50c0a96d99cb7.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"f57fee17a6ed9f763c6b","c":{"main":true}} -------------------------------------------------------------------------------- /dist/ca422d2851f20f63c81f.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"6294501d302255885fa4","c":{"main":true}} -------------------------------------------------------------------------------- /dist/cb53c6d90020e9c6bb5a.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"8b4433c9b2f9b5e39f40","c":{"main":true}} -------------------------------------------------------------------------------- /dist/cd131dd65bb92cc56e65.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"6d5c7a515dd2eeae925f","c":{"main":true}} -------------------------------------------------------------------------------- /dist/cfb4cb53265eb603ca0e.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"6df61dc3edce25972a35","c":{"main":true}} -------------------------------------------------------------------------------- /dist/client/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "demo": { 3 | "css": "/demo.014959d9d8de621761dc.css", 4 | "js": "/demo.014959d9d8de621761dc.js" 5 | }, 6 | "home": { 7 | "css": "/home.014959d9d8de621761dc.css", 8 | "js": "/home.014959d9d8de621761dc.js" 9 | }, 10 | "": { 11 | "eot": "/fonts/tdicon.eot", 12 | "ttf": "/fonts/tdicon.ttf", 13 | "svg": "/fonts/tdicon.svg", 14 | "json": [ 15 | "/e5579dc2b4c627f45aca.hot-update.json", 16 | "/7e3c09dbaea5fa65f8df.hot-update.json" 17 | ], 18 | "js": [ 19 | "/dll/vendor2.js", 20 | "/dll/vendor1.js", 21 | "/../../public/scripts/g6-for-react.min.js", 22 | "/../../public/scripts/g6-for-react.js" 23 | ] 24 | } 25 | } -------------------------------------------------------------------------------- /dist/client/dll/vendor1.js.json: -------------------------------------------------------------------------------- 1 | {"name":"vendor1_library","content":{"./node_modules/react/index.js":{"id":1,"meta":{}},"./node_modules/fbjs/lib/emptyFunction.js":{"id":5,"meta":{}},"./node_modules/fbjs/lib/invariant.js":{"id":6,"meta":{}},"./node_modules/fbjs/lib/emptyObject.js":{"id":9,"meta":{}},"./node_modules/object-assign/index.js":{"id":11,"meta":{}},"./node_modules/mobx/lib/mobx.module.js":{"id":14,"meta":{"harmonyModule":true},"exports":["Reaction","untracked","IDerivationState","createAtom","spy","comparer","isObservableObject","isBoxedObservable","isObservableArray","ObservableMap","isObservableMap","transaction","observable","computed","isObservable","isObservableProp","isComputed","isComputedProp","extendObservable","extendShallowObservable","observe","intercept","autorun","reaction","when","action","isAction","runInAction","keys","values","set","remove","has","get","decorate","configure","onBecomeObserved","onBecomeUnobserved","flow","toJS","trace","getDependencyTree","getObserverTree","_resetGlobalState","_getGlobalState","getDebugName","getAtom","_getAdministration","_allowStateChanges","isArrayLike","_isComputingDerivation","onReactionError","_interceptReads"]},"../../../.nvm/versions/node/v9.3.0/lib/node_modules/tdtool/node_modules/webpack/buildin/global.js":{"id":16,"meta":{}},"./node_modules/react/cjs/react.production.min.js":{"id":22,"meta":{}},"./node_modules/react-dom/index.js":{"id":23,"meta":{}},"../../../.nvm/versions/node/v9.3.0/lib/node_modules/tdtool/node_modules/node-libs-browser/node_modules/process/browser.js":{"id":24,"meta":{}},"./node_modules/mobx-react-router/dist/mobx-react-router.js":{"id":159,"meta":{}},"./node_modules/mobx-react/index.module.js":{"id":160,"meta":{"harmonyModule":true},"exports":["propTypes","PropTypes","onError","observer","Observer","renderReporter","componentByNodeRegistery","componentByNodeRegistry","trackComponents","useStaticRendering","Provider","inject"]},"./polyfill.js":{"id":163,"meta":{}},"./node_modules/es5-shim/es5-shim.js":{"id":165,"meta":{}},"./node_modules/es6-promise/auto.js":{"id":166,"meta":{}},"./node_modules/es6-promise/dist/es6-promise.js":{"id":167,"meta":{}},"./node_modules/fbjs/lib/ExecutionEnvironment.js":{"id":168,"meta":{}},"./node_modules/fbjs/lib/containsNode.js":{"id":169,"meta":{}},"./node_modules/fbjs/lib/getActiveElement.js":{"id":170,"meta":{}},"./node_modules/fbjs/lib/isNode.js":{"id":171,"meta":{}},"./node_modules/fbjs/lib/isTextNode.js":{"id":172,"meta":{}},"./node_modules/fbjs/lib/shallowEqual.js":{"id":173,"meta":{}},"./node_modules/react-dom/cjs/react-dom.production.min.js":{"id":187,"meta":{}}}} -------------------------------------------------------------------------------- /dist/client/fonts/tdicon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hihl/g6-for-react/ab84321e45644b62a2467b59fee39a6daed9a36a/dist/client/fonts/tdicon.eot -------------------------------------------------------------------------------- /dist/client/fonts/tdicon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hihl/g6-for-react/ab84321e45644b62a2467b59fee39a6daed9a36a/dist/client/fonts/tdicon.ttf -------------------------------------------------------------------------------- /dist/d20b7c0772f614ead422.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"16b90df38d2b2755cb22","c":{"main":true}} -------------------------------------------------------------------------------- /dist/f51fc46545c8f7f2eb38.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"a421e7f5e1124178db81","c":{"main":true}} -------------------------------------------------------------------------------- /dist/f57fee17a6ed9f763c6b.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"9fcfa60e2a46f808ddf8","c":{"main":true}} -------------------------------------------------------------------------------- /dist/main.16b90df38d2b2755cb22.hot-update.js: -------------------------------------------------------------------------------- 1 | require("source-map-support").install(); 2 | exports.id = "main"; 3 | exports.modules = { 4 | 5 | /***/ "./src/server/previews.js": 6 | /*!********************************!*\ 7 | !*** ./src/server/previews.js ***! 8 | \********************************/ 9 | /*! exports provided: default */ 10 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 11 | 12 | "use strict"; 13 | __webpack_require__.r(__webpack_exports__); 14 | /* harmony default export */ __webpack_exports__["default"] = ({ 15 | basic: { 16 | "default-node": { 17 | title: "默认-边", 18 | code: `` 59 | } 60 | } 61 | }); 62 | 63 | /***/ }) 64 | 65 | }; 66 | //# sourceMappingURL=main.16b90df38d2b2755cb22.hot-update.js.map -------------------------------------------------------------------------------- /dist/main.16b90df38d2b2755cb22.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.16b90df38d2b2755cb22.hot-update.js","sources":["webpack:///./src/server/previews.js"],"sourcesContent":["export default {\n basic: {\n \"default-node\": {\n title: \"默认-边\",\n code: ``\n }\n }\n}"],"mappings":";;;;;;;;;;;;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /dist/main.6df61dc3edce25972a35.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.6df61dc3edce25972a35.hot-update.js","sources":["webpack:///./src/server/main.js"],"sourcesContent":["import express from 'express';\nimport path from 'path';\nimport cookieParser from 'cookie-parser';\nimport bodyParser from 'body-parser';\nimport morgan from 'morgan';\nimport assets from './client/assets.json';\nimport config from './config.json';\nimport previews from './previews';\n\nconst app = express();\nconst port = process.env.port || 3005; // 默认端口\n\nfunction renderPreview(group, page) {\n const preview = previews[group][page];\n return `\n\n\n \n \n ${preview.title}\n \n \n \n \n \n \n \n\n
    \n${preview.code}\n\n\n `;\n}\n\nfunction renderView(conf, page) {\n return `\n \n \n \n G6-for-React\n \n \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n `;\n}\n\napp.use(express.static(path.resolve(__dirname, 'client')));\napp.use(express.static(path.resolve(__dirname, '..', 'public')));\napp.use(cookieParser());\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(bodyParser.json());\napp.use(morgan());\n\napp.get('/', (req, res) => {\n res.send(renderView(Object.assign({}, config, assets), 'home'));\n});\n\napp.get('/demo/:group/:page', (req, res) => {\n const { group, page } = req.params;\n res.send(renderView(Object.assign({ previewCode: renderPreview(group, page) }, config, assets), 'demo'));\n});\n\napp.listen(port, () => {\n console.log(`The server is running at http://127.0.0.1:${port}/`);\n});"],"mappings":";;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /dist/main.94c376cd3f6e393f4b03.hot-update.js: -------------------------------------------------------------------------------- 1 | require("source-map-support").install(); 2 | exports.id = "main"; 3 | exports.modules = { 4 | 5 | /***/ "./src/server/main.js": 6 | /*!****************************!*\ 7 | !*** ./src/server/main.js ***! 8 | \****************************/ 9 | /*! no exports provided */ 10 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 11 | 12 | "use strict"; 13 | __webpack_require__.r(__webpack_exports__); 14 | /* harmony import */ var express__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! express */ "express"); 15 | /* harmony import */ var express__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(express__WEBPACK_IMPORTED_MODULE_0__); 16 | /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! path */ "path"); 17 | /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_1__); 18 | /* harmony import */ var cookie_parser__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! cookie-parser */ "cookie-parser"); 19 | /* harmony import */ var cookie_parser__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(cookie_parser__WEBPACK_IMPORTED_MODULE_2__); 20 | /* harmony import */ var body_parser__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! body-parser */ "body-parser"); 21 | /* harmony import */ var body_parser__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(body_parser__WEBPACK_IMPORTED_MODULE_3__); 22 | /* harmony import */ var morgan__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! morgan */ "morgan"); 23 | /* harmony import */ var morgan__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(morgan__WEBPACK_IMPORTED_MODULE_4__); 24 | /* harmony import */ var _client_assets_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./client/assets.json */ "./client/assets.json"); 25 | /* harmony import */ var _client_assets_json__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_client_assets_json__WEBPACK_IMPORTED_MODULE_5__); 26 | /* harmony import */ var _config_json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./config.json */ "./src/server/config.json"); 27 | var _config_json__WEBPACK_IMPORTED_MODULE_6___namespace = /*#__PURE__*/__webpack_require__.t(/*! ./config.json */ "./src/server/config.json", 1); 28 | /* harmony import */ var _previews__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./previews */ "./src/server/previews.js"); 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | const app = express__WEBPACK_IMPORTED_MODULE_0___default()(); 39 | const port = process.env.port || 3005; // 默认端口 40 | 41 | function renderPreview(group, page) { 42 | const preview = _previews__WEBPACK_IMPORTED_MODULE_7__["default"][group][page]; 43 | return ` 44 | 45 | 46 | 47 | 48 | ${preview.title} 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
    57 | 58 | ${preview.code} 59 | 60 | 61 | `; 62 | } 63 | 64 | function renderView(conf, page) { 65 | return ` 66 | 67 | 68 | 69 | G6-for-React 70 | 72 | 73 | 74 | 75 | 76 | 77 | 81 | 82 | 83 |
    84 |
    85 | 86 | 87 | 88 | `; 89 | } 90 | 91 | app.use(express__WEBPACK_IMPORTED_MODULE_0___default.a.static(path__WEBPACK_IMPORTED_MODULE_1___default.a.resolve(__dirname, 'client'))); 92 | app.use(express__WEBPACK_IMPORTED_MODULE_0___default.a.static(path__WEBPACK_IMPORTED_MODULE_1___default.a.resolve(__dirname, '..', 'public'))); 93 | app.use(cookie_parser__WEBPACK_IMPORTED_MODULE_2___default()()); 94 | app.use(body_parser__WEBPACK_IMPORTED_MODULE_3___default.a.urlencoded({ extended: true })); 95 | app.use(body_parser__WEBPACK_IMPORTED_MODULE_3___default.a.json()); 96 | app.use(morgan__WEBPACK_IMPORTED_MODULE_4___default()()); 97 | 98 | app.get('/', (req, res) => { 99 | res.send(renderView(Object.assign({}, _config_json__WEBPACK_IMPORTED_MODULE_6__, _client_assets_json__WEBPACK_IMPORTED_MODULE_5___default.a), 'home')); 100 | }); 101 | 102 | app.get('/demo/:group/:page', (req, res) => { 103 | const { group, page } = req.params; 104 | res.send(renderView(Object.assign({ previewCode: renderPreview(group, page) }, _config_json__WEBPACK_IMPORTED_MODULE_6__, _client_assets_json__WEBPACK_IMPORTED_MODULE_5___default.a), 'demo')); 105 | }); 106 | 107 | app.listen(port, () => { 108 | console.log(`The server is running at http://127.0.0.1:${port}/`); 109 | }); 110 | 111 | /***/ }) 112 | 113 | }; 114 | //# sourceMappingURL=main.94c376cd3f6e393f4b03.hot-update.js.map -------------------------------------------------------------------------------- /dist/main.94c376cd3f6e393f4b03.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.94c376cd3f6e393f4b03.hot-update.js","sources":["webpack:///./src/server/main.js"],"sourcesContent":["import express from 'express';\nimport path from 'path';\nimport cookieParser from 'cookie-parser';\nimport bodyParser from 'body-parser';\nimport morgan from 'morgan';\nimport assets from './client/assets.json';\nimport config from './config.json';\nimport previews from './previews';\n\nconst app = express();\nconst port = process.env.port || 3005; // 默认端口\n\nfunction renderPreview(group, page) {\n const preview = previews[group][page];\n return `\n\n\n \n \n ${preview.title}\n \n \n \n \n \n \n\n
    \n\n${preview.code}\n\n\n `;\n}\n\nfunction renderView(conf, page) {\n return `\n \n \n \n G6-for-React\n \n \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n `;\n}\n\napp.use(express.static(path.resolve(__dirname, 'client')));\napp.use(express.static(path.resolve(__dirname, '..', 'public')));\napp.use(cookieParser());\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(bodyParser.json());\napp.use(morgan());\n\napp.get('/', (req, res) => {\n res.send(renderView(Object.assign({}, config, assets), 'home'));\n});\n\napp.get('/demo/:group/:page', (req, res) => {\n const { group, page } = req.params;\n res.send(renderView(Object.assign({ previewCode: renderPreview(group, page) }, config, assets), 'demo'));\n});\n\napp.listen(port, () => {\n console.log(`The server is running at http://127.0.0.1:${port}/`);\n});"],"mappings":";;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /dist/main.9fcfa60e2a46f808ddf8.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.9fcfa60e2a46f808ddf8.hot-update.js","sources":["webpack:///./src/server/previews.js"],"sourcesContent":["export default {\n basic: {\n \"default-node\": {\n title: \"默认-边\",\n code: ``\n },\n \"default-edge\": {\n title: '默认-边',\n code: ``\n },\n \"default-group\": {\n title: '默认-分组',\n code: ``\n }\n }\n}"],"mappings":";;;;;;;;;;;;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /dist/main.affda1b50c0a96d99cb7.hot-update.js: -------------------------------------------------------------------------------- 1 | require("source-map-support").install(); 2 | exports.id = "main"; 3 | exports.modules = { 4 | 5 | /***/ "./src/server/previews.js": 6 | /*!********************************!*\ 7 | !*** ./src/server/previews.js ***! 8 | \********************************/ 9 | /*! exports provided: default */ 10 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 11 | 12 | "use strict"; 13 | __webpack_require__.r(__webpack_exports__); 14 | /* harmony default export */ __webpack_exports__["default"] = ({ 15 | basic: { 16 | "default-node": { 17 | title: "默认-边", 18 | code: `` 59 | }, 60 | "default-edge": { 61 | title: '默认-边', 62 | code: ``\n },\n \"default-edge\": {\n title: '默认-边',\n code: `` 23 | } 24 | } 25 | }); 26 | 27 | /***/ }) 28 | 29 | }; 30 | //# sourceMappingURL=main.cfb4cb53265eb603ca0e.hot-update.js.map -------------------------------------------------------------------------------- /dist/main.cfb4cb53265eb603ca0e.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.cfb4cb53265eb603ca0e.hot-update.js","sources":["webpack:///./src/server/previews.js"],"sourcesContent":["export default {\n basic: {\n \"default-node\": {\n title: \"默认-边\",\n code: ``\n }\n }\n}"],"mappings":";;;;;;;;;;;;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /dist/main.d20b7c0772f614ead422.hot-update.js: -------------------------------------------------------------------------------- 1 | require("source-map-support").install(); 2 | exports.id = "main"; 3 | exports.modules = { 4 | 5 | /***/ "./src/server/main.js": 6 | /*!****************************!*\ 7 | !*** ./src/server/main.js ***! 8 | \****************************/ 9 | /*! no exports provided */ 10 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 11 | 12 | "use strict"; 13 | __webpack_require__.r(__webpack_exports__); 14 | /* harmony import */ var express__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! express */ "express"); 15 | /* harmony import */ var express__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(express__WEBPACK_IMPORTED_MODULE_0__); 16 | /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! path */ "path"); 17 | /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_1__); 18 | /* harmony import */ var cookie_parser__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! cookie-parser */ "cookie-parser"); 19 | /* harmony import */ var cookie_parser__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(cookie_parser__WEBPACK_IMPORTED_MODULE_2__); 20 | /* harmony import */ var body_parser__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! body-parser */ "body-parser"); 21 | /* harmony import */ var body_parser__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(body_parser__WEBPACK_IMPORTED_MODULE_3__); 22 | /* harmony import */ var morgan__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! morgan */ "morgan"); 23 | /* harmony import */ var morgan__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(morgan__WEBPACK_IMPORTED_MODULE_4__); 24 | /* harmony import */ var _client_assets_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./client/assets.json */ "./client/assets.json"); 25 | /* harmony import */ var _client_assets_json__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_client_assets_json__WEBPACK_IMPORTED_MODULE_5__); 26 | /* harmony import */ var _config_json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./config.json */ "./src/server/config.json"); 27 | var _config_json__WEBPACK_IMPORTED_MODULE_6___namespace = /*#__PURE__*/__webpack_require__.t(/*! ./config.json */ "./src/server/config.json", 1); 28 | /* harmony import */ var _previews__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./previews */ "./src/server/previews.js"); 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | const app = express__WEBPACK_IMPORTED_MODULE_0___default()(); 39 | const port = process.env.port || 3005; // 默认端口 40 | 41 | function renderPreview(group, page) { 42 | const preview = _previews__WEBPACK_IMPORTED_MODULE_7__["default"][group][page]; 43 | return ` 44 | 45 | 46 | 47 | 48 | ${preview.title} 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
    57 | 58 | ${preview.code} 59 | 60 | 61 | `; 62 | } 63 | 64 | function renderView(conf, page) { 65 | return ` 66 | 67 | 68 | 69 | G6-for-React 70 | 72 | 73 | 74 | 75 | 76 | 77 | 81 | 82 | 83 |
    84 |
    85 | 86 | 87 | 88 | `; 89 | } 90 | 91 | app.use(express__WEBPACK_IMPORTED_MODULE_0___default.a.static(path__WEBPACK_IMPORTED_MODULE_1___default.a.resolve(__dirname, 'client'))); 92 | app.use(express__WEBPACK_IMPORTED_MODULE_0___default.a.static(path__WEBPACK_IMPORTED_MODULE_1___default.a.resolve(__dirname, '..', 'public'))); 93 | app.use(cookie_parser__WEBPACK_IMPORTED_MODULE_2___default()()); 94 | app.use(body_parser__WEBPACK_IMPORTED_MODULE_3___default.a.urlencoded({ extended: true })); 95 | app.use(body_parser__WEBPACK_IMPORTED_MODULE_3___default.a.json()); 96 | app.use(morgan__WEBPACK_IMPORTED_MODULE_4___default()()); 97 | 98 | app.get('/', (req, res) => { 99 | res.send(renderView(Object.assign({}, _config_json__WEBPACK_IMPORTED_MODULE_6__, _client_assets_json__WEBPACK_IMPORTED_MODULE_5___default.a), 'home')); 100 | }); 101 | 102 | app.get('/demo/:group/:page', (req, res) => { 103 | const { group, page } = req.params; 104 | res.send(renderView(Object.assign({ previewCode: renderPreview(group, page) }, _config_json__WEBPACK_IMPORTED_MODULE_6__, _client_assets_json__WEBPACK_IMPORTED_MODULE_5___default.a), 'demo')); 105 | }); 106 | 107 | app.listen(port, () => { 108 | console.log(`The server is running at http://127.0.0.1:${port}/`); 109 | }); 110 | 111 | /***/ }) 112 | 113 | }; 114 | //# sourceMappingURL=main.d20b7c0772f614ead422.hot-update.js.map -------------------------------------------------------------------------------- /dist/main.d20b7c0772f614ead422.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.d20b7c0772f614ead422.hot-update.js","sources":["webpack:///./src/server/main.js"],"sourcesContent":["import express from 'express';\nimport path from 'path';\nimport cookieParser from 'cookie-parser';\nimport bodyParser from 'body-parser';\nimport morgan from 'morgan';\nimport assets from './client/assets.json';\nimport config from './config.json';\nimport previews from './previews';\n\nconst app = express();\nconst port = process.env.port || 3005; // 默认端口\n\nfunction renderPreview(group, page) {\n const preview = previews[group][page];\n return `\n\n\n \n \n ${preview.title}\n \n \n \n \n \n \n\n
    \n\n${preview.code}\n\n\n `;\n}\n\nfunction renderView(conf, page) {\n return `\n \n \n \n G6-for-React\n \n \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n `;\n}\n\napp.use(express.static(path.resolve(__dirname, 'client')));\napp.use(express.static(path.resolve(__dirname, '..', 'public')));\napp.use(cookieParser());\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(bodyParser.json());\napp.use(morgan());\n\napp.get('/', (req, res) => {\n res.send(renderView(Object.assign({}, config, assets), 'home'));\n});\n\napp.get('/demo/:group/:page', (req, res) => {\n const { group, page } = req.params;\n res.send(renderView(Object.assign({ previewCode: renderPreview(group, page) }, config, assets), 'demo'));\n});\n\napp.listen(port, () => {\n console.log(`The server is running at http://127.0.0.1:${port}/`);\n});"],"mappings":";;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /dist/main.f57fee17a6ed9f763c6b.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.f57fee17a6ed9f763c6b.hot-update.js","sources":["webpack:///./src/server/previews.js"],"sourcesContent":["export default {\n basic: {\n \"default-node\": {\n title: \"默认-边\",\n code: ``\n },\n \"default-edge\": {\n title: '默认-边',\n code: `