From 5dd3288959b698fe0780ce627ee15c5b8c133ec3 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Mon, 22 Mar 2021 19:58:50 +0800 Subject: [PATCH] chore: update version nums --- packages/element/package.json | 2 +- packages/g6/package.json | 2 +- packages/pc/package.json | 6 +- packages/plugin/package.json | 2 +- .../docs/api/graphLayout/comboForce.en.md | 2 +- .../docs/api/graphLayout/forceAtlas2.en.md | 37 ++++++++ .../docs/api/graphLayout/forceAtlas2.zh.md | 93 +++++++++++++++++++ .../site/docs/api/graphLayout/guide.en.md | 1 + .../site/docs/api/graphLayout/guide.zh.md | 1 + .../site/examples/net/forceDirected/API.zh.md | 6 ++ .../net/forceDirected/demo/basicFA2.js | 42 +++++++++ .../examples/net/forceDirected/demo/meta.json | 8 ++ packages/site/package.json | 2 +- 13 files changed, 196 insertions(+), 8 deletions(-) create mode 100644 packages/site/docs/api/graphLayout/forceAtlas2.en.md create mode 100644 packages/site/docs/api/graphLayout/forceAtlas2.zh.md create mode 100644 packages/site/examples/net/forceDirected/demo/basicFA2.js diff --git a/packages/element/package.json b/packages/element/package.json index d830777fa28..07546c4fd0b 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -61,7 +61,7 @@ }, "dependencies": { "@antv/g-base": "^0.5.1", - "@antv/g6-core": "*", + "@antv/g6-core": "0.2.2", "@antv/util": "~2.0.5" }, "devDependencies": { diff --git a/packages/g6/package.json b/packages/g6/package.json index 655bd247199..a50ce7d6f12 100644 --- a/packages/g6/package.json +++ b/packages/g6/package.json @@ -66,7 +66,7 @@ ] }, "dependencies": { - "@antv/g6-pc": "*" + "@antv/g6-pc": "0.2.2" }, "devDependencies": { "@babel/core": "^7.7.7", diff --git a/packages/pc/package.json b/packages/pc/package.json index 7b81c3c85d9..4d86402303e 100644 --- a/packages/pc/package.json +++ b/packages/pc/package.json @@ -74,9 +74,9 @@ "@antv/g-canvas": "^0.5.2", "@antv/g-math": "^0.1.1", "@antv/g-svg": "^0.5.1", - "@antv/g6-core": "*", - "@antv/g6-plugin": "*", - "@antv/g6-element": "*", + "@antv/g6-core": "0.2.2", + "@antv/g6-plugin": "0.2.2", + "@antv/g6-element": "0.2.2", "@antv/algorithm": "^0.1.5", "@antv/hierarchy": "^0.6.7", "@antv/layout": "^0.1.11", diff --git a/packages/plugin/package.json b/packages/plugin/package.json index df1a8188c71..4f494fc3cef 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -22,7 +22,7 @@ "@antv/g-base": "^0.5.1", "@antv/g-canvas": "^0.5.2", "@antv/g-svg": "^0.5.2", - "@antv/g6-core": "*", + "@antv/g6-core": "0.2.2", "@antv/matrix-util": "^3.0.4", "@antv/scale": "^0.3.4", "@antv/util": "^2.0.9", diff --git a/packages/site/docs/api/graphLayout/comboForce.en.md b/packages/site/docs/api/graphLayout/comboForce.en.md index 06b1c5bbbf5..fdfc3491361 100644 --- a/packages/site/docs/api/graphLayout/comboForce.en.md +++ b/packages/site/docs/api/graphLayout/comboForce.en.md @@ -1,6 +1,6 @@ --- title: ComboForce -order: 11 +order: 12 --- _It is a new feature of V3.5._ Combo Force is designed for the graph with combos based on classical force directed layout algorith. It modifies the forces between nodes according to their combo infomation to achieve a final result with clustering nodes inside each combo and no overlappings. diff --git a/packages/site/docs/api/graphLayout/forceAtlas2.en.md b/packages/site/docs/api/graphLayout/forceAtlas2.en.md new file mode 100644 index 00000000000..4cdea5f9693 --- /dev/null +++ b/packages/site/docs/api/graphLayout/forceAtlas2.en.md @@ -0,0 +1,37 @@ +--- +title: Force Atlas 2 +order: 11 +--- + +_It is a new feature of V3.2.2._ FA2 is a kind of force directed layout, which performs better on the convergence and compactness. + +img + +```javascript +const graph = new G6.Graph({ + container: 'mountNode', + width: 1000, + height: 600, + layout: { + type: 'random', + width: 300, + height: 300, + }, +}); +``` + +## layoutCfg.center + +**Type**: Array
**Example**: [ 0, 0 ]
**Default**: The center of the graph
**Required**: false
**Description**: The center of the layout + +## layoutCfg.width + +**Type**: Number
**Default**: The width of the graph
**Required**: false
**Description**: The width of the layout + +## layoutCfg.height + +**Type**: Number
**Default**: The height of the graph
**Required**: false
**Description**: The height of the layout + +## layoutCfg.workerEnabled + +**Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction diff --git a/packages/site/docs/api/graphLayout/forceAtlas2.zh.md b/packages/site/docs/api/graphLayout/forceAtlas2.zh.md new file mode 100644 index 00000000000..7e74004dacc --- /dev/null +++ b/packages/site/docs/api/graphLayout/forceAtlas2.zh.md @@ -0,0 +1,93 @@ +--- +title: Force Atlas 2 +order: 11 +--- + +*V4.2.2 新增功能。*Force Atlas 2 是一种力导向布局的变形，比 force 收敛地更好，更紧凑。 + +img + +```javascript +const graph = new G6.Graph({ + container: 'mountNode', + width: 1000, + height: 600, + layout: { + type: 'random', + width: 300, + height: 300, + }, +}); +``` + +## layoutCfg.center + +**类型**： Array
**示例**：[ 0, 0 ]
**默认值**：图的中心
**是否必须**：false
**说明**：布局的中心 + +## layoutCfg.width + +**类型**： Number
**默认值**：图的宽度
**是否必须**：false
**说明**：布局的宽度范围 + +## layoutCfg.height + +**类型**： Number
**默认值**：图的高度
**是否必须**：false
**说明**：布局的高度范围 + +## layoutCfg.workerEnabled + +**类型**: Boolean
**默认值**: false
**是否必须**: false
**说明**: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互 + +## layoutCfg.kr + +**类型**： Number
**默认值**：5
**是否必须**：false
**说明**：斥力系数，可用于调整布局的紧凑程度。kr 越大，布局越松散 + +## layoutCfg.kg + +**类型**： Number
**默认值**：5
**是否必须**：false
**说明**：重力系数。kg 越大，布局越聚集在中心 + +## layoutCfg.ks + +**类型**： Number
**默认值**：0.1
**是否必须**：false
**说明**：控制迭代过程中，节点移动的速度 + +## layoutCfg.tao + +**类型**： Number
**默认值**：0.1
**是否必须**：false
**说明**：迭代接近收敛时停止震荡的容忍度 + +## layoutCfg.mode + +**类型**： 'normal' | 'linlog'
**默认值**：'normal'
**是否必须**：false
**说明**：'normal' 模式下，聚类将更加紧凑 + +## layoutCfg.preventOverlap + +**类型**： boolean
**默认值**：false
**是否必须**：false
**说明**：是否防止节点重叠 + +## layoutCfg.dissuadeHubs + +**类型**： boolean
**默认值**：false
**是否必须**：false
**说明**：是否打开 hub 模式。若为 true，相比与出度大的节点，入度大的节点将会有更高的优先级被放置在中心位置 + +## layoutCfg.barnesHut + +**类型**： boolean
**默认值**：false
**是否必须**：false
**说明**：是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开 + +## layoutCfg.prune + +**类型**： boolean
**默认值**：false
**是否必须**：false
**说明**：是否开启自动剪枝模式。默认情况下，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量 + +## layoutCfg.maxIteration + +**类型**： number
**默认值**：0
**是否必须**：false
**说明**：最大迭代次数，若为 0 则将自动调整 + +## layoutCfg.getWidth + +**类型**： function
**默认值**：undefined
**是否必须**：false
**说明**：节点宽度的函数，参数为节点数据 + +## layoutCfg.getHeight + +**类型**： function
**默认值**：undefined
**是否必须**：false
**说明**：节点高度的函数，参数为节点数据 + +## layoutCfg.onLayoutEnd + +**类型**： function
**默认值**：undefined
**是否必须**：false
**说明**：布局结束后的回调函数 + +## layoutCfg.onTick + +**类型**： function
**默认值**：undefined
**是否必须**：false
**说明**：布局每次迭代的回调函数 \ No newline at end of file diff --git a/packages/site/docs/api/graphLayout/guide.en.md b/packages/site/docs/api/graphLayout/guide.en.md index 01789043f1f..be89a6f421b 100644 --- a/packages/site/docs/api/graphLayout/guide.en.md +++ b/packages/site/docs/api/graphLayout/guide.en.md @@ -12,6 +12,7 @@ Notice that the layouts for Graph cannot be used on TreeGraph. - [Random Layout](./random): Randomizes the node postions; - [GForce Layout](./gforce): Classical force-directed layout supports GPU parallel computing, supported by G6 4.0; - [Force Layout](./force): Classical force-directed layout; +- [Force Atlas 2 Layout](./forceAtlas2): FA2 is a kind of force directed layout, which performs better on the convergence and compactness; - [Fruchterman Layout](./fruchterman): A kind of force-directed layout; - [Circular Layout](./circular): Arranges the nodes on a circle; - [Radial Layout](./radial): Arranges the nodes around a focus node radially; diff --git a/packages/site/docs/api/graphLayout/guide.zh.md b/packages/site/docs/api/graphLayout/guide.zh.md index 5b7ccfd7890..3f8ffa2d5ac 100644 --- a/packages/site/docs/api/graphLayout/guide.zh.md +++ b/packages/site/docs/api/graphLayout/guide.zh.md @@ -15,6 +15,7 @@ G6 提供了以下内置布局算法。可以在[实例化图时配置](#实例 > 力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。 - [Force Layout](./force)：引用 d3 的经典力导向布局； +- [Force Atlas 2 Layout](./forceAtlas2)：FA2 力导向布局，比 force 收敛地更好，更紧凑； - [Circular Layout](./circular)：环形布局； - [Radial Layout](./radial)：辐射状布局； - [MDS Layout](./mds)：高维数据降维算法布局； diff --git a/packages/site/examples/net/forceDirected/API.zh.md b/packages/site/examples/net/forceDirected/API.zh.md index cc9c058e2e2..d947cdadeba 100644 --- a/packages/site/examples/net/forceDirected/API.zh.md +++ b/packages/site/examples/net/forceDirected/API.zh.md @@ -2,4 +2,10 @@ title: API --- +# Force Layout + `markdown:docs/api/graphLayout/force.zh.md` + +# Force Atlas 2 Layout + +`markdown:docs/api/graphLayout/forceAtlas2.zh.md` diff --git a/packages/site/examples/net/forceDirected/demo/basicFA2.js b/packages/site/examples/net/forceDirected/demo/basicFA2.js new file mode 100644 index 00000000000..cb786fe04b0 --- /dev/null +++ b/packages/site/examples/net/forceDirected/demo/basicFA2.js @@ -0,0 +1,42 @@ +import G6 from '@antv/g6'; + +const container = document.getElementById('container'); +const width = container.scrollWidth; +const height = container.scrollHeight || 500; +const graph = new G6.Graph({ + container: 'container', + width, + height, + modes: { + default: ['zoom-canvas', 'drag-canvas', 'drag-node'], + }, + layout: { + type: 'forceAtlas2', + preventOverlap: true, + kr: 10, + center: [250, 250], + }, + defaultNode: { + size: 20, + }, +}); + +fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json') + .then((res) => res.json()) + .then((data) => { + data.nodes.forEach(node => { + node.x = Math.random() * 1; + }); + graph.on('afterlayout', e => { + graph.fitView() + }) + graph.data(data); + graph.render(); + }); + +if (typeof window !== 'undefined') + window.onresize = () => { + if (!graph || graph.get('destroyed')) return; + if (!container || !container.scrollWidth || !container.scrollHeight) return; + graph.changeSize(container.scrollWidth, container.scrollHeight); + }; diff --git a/packages/site/examples/net/forceDirected/demo/meta.json b/packages/site/examples/net/forceDirected/demo/meta.json index 3945a944f3b..89b16668093 100644 --- a/packages/site/examples/net/forceDirected/demo/meta.json +++ b/packages/site/examples/net/forceDirected/demo/meta.json @@ -12,6 +12,14 @@ }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ce2WSIlo_fcAAAAAAAAAAABkARQnAQ" }, + { + "filename": "basicFA2.js", + "title": { + "zh": "基本 Force Atlas 2", + "en": "Basic Force-Atlas 2 Layout" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MqwAQZLIVPwAAAAAAAAAAAAAARQnAQ" + }, { "filename": "forceDirectedPreventOverlap.js", "title": { diff --git a/packages/site/package.json b/packages/site/package.json index e80f6b0c081..56ffc94c395 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -34,7 +34,7 @@ "dependencies": { "@antv/chart-node-g6": "^0.0.3", "@antv/util": "^2.0.9", - "@antv/g6": "*", + "@antv/g6": "4.2.2", "@antv/gatsby-theme-antv": "1.1.1", "gatsby": "^2.24.40", "gh-pages": "^2.1.1",