ForceAtlas2 力导向布局
上一篇
Force 力导向布局
下一篇
Fruchterman 力导向布局
Loading...
ForceAtlas2 是一种基于力导向的布局算法，它通过模拟物理系统中的力来优化节点位置。该布局特别适用于大规模网络数据的可视化，能够有效地展示节点之间的关系和聚类结构。
createGraph({data: {nodes: [{ id: 'Myriel' },{ id: 'Napoleon' },{ id: 'Mlle.Baptistine' },{ id: 'Mme.Magloire' },{ id: 'CountessdeLo' },{ id: 'Geborand' },{ id: 'Champtercier' },{ id: 'Cravatte' },{ id: 'Count' },{ id: 'OldMan' },{ id: 'Labarre' },{ id: 'Valjean' },{ id: 'Marguerite' },{ id: 'Mme.deR' },{ id: 'Isabeau' },{ id: 'Gervais' },{ id: 'Tholomyes' },{ id: 'Listolier' },{ id: 'Fameuil' },{ id: 'Blacheville' },{ id: 'Favourite' },{ id: 'Dahlia' },{ id: 'Zephine' },{ id: 'Fantine' },{ id: 'Mme.Thenardier' },{ id: 'Thenardier' },{ id: 'Cosette' },{ id: 'Javert' },{ id: 'Fauchelevent' },{ id: 'Bamatabois' },{ id: 'Perpetue' },{ id: 'Simplice' },{ id: 'Scaufflaire' },{ id: 'Woman1' },{ id: 'Judge' },{ id: 'Champmathieu' },{ id: 'Brevet' },{ id: 'Chenildieu' },{ id: 'Cochepaille' },{ id: 'Pontmercy' },{ id: 'Boulatruelle' },{ id: 'Eponine' },{ id: 'Anzelma' },{ id: 'Woman2' },{ id: 'MotherInnocent' },{ id: 'Gribier' },{ id: 'Jondrette' },{ id: 'Mme.Burgon' },{ id: 'Gavroche' },{ id: 'Gillenormand' },{ id: 'Magnon' },{ id: 'Mlle.Gillenormand' },{ id: 'Mme.Pontmercy' },{ id: 'Mlle.Vaubois' },{ id: 'Lt.Gillenormand' },{ id: 'Marius' },{ id: 'BaronessT' },{ id: 'Mabeuf' },{ id: 'Enjolras' },{ id: 'Combeferre' },{ id: 'Prouvaire' },{ id: 'Feuilly' },{ id: 'Courfeyrac' },{ id: 'Bahorel' },{ id: 'Bossuet' },{ id: 'Joly' },{ id: 'Grantaire' },{ id: 'MotherPlutarch' },{ id: 'Gueulemer' },{ id: 'Babet' },{ id: 'Claquesous' },{ id: 'Montparnasse' },{ id: 'Toussaint' },{ id: 'Child1' },{ id: 'Child2' },{ id: 'Brujon' },{ id: 'Mme.Hucheloup' },],edges: [{ source: 'Napoleon', target: 'Myriel', value: 1 },{ source: 'Mlle.Baptistine', target: 'Myriel', value: 8 },{ source: 'Mme.Magloire', target: 'Myriel', value: 10 },{ source: 'Mme.Magloire', target: 'Mlle.Baptistine', value: 6 },{ source: 'CountessdeLo', target: 'Myriel', value: 1 },{ source: 'Geborand', target: 'Myriel', value: 1 },{ source: 'Champtercier', target: 'Myriel', value: 1 },{ source: 'Cravatte', target: 'Myriel', value: 1 },{ source: 'Count', target: 'Myriel', value: 2 },{ source: 'OldMan', target: 'Myriel', value: 1 },{ source: 'Valjean', target: 'Labarre', value: 1 },{ source: 'Valjean', target: 'Mme.Magloire', value: 3 },{ source: 'Valjean', target: 'Mlle.Baptistine', value: 3 },{ source: 'Valjean', target: 'Myriel', value: 5 },{ source: 'Marguerite', target: 'Valjean', value: 1 },{ source: 'Mme.deR', target: 'Valjean', value: 1 },{ source: 'Isabeau', target: 'Valjean', value: 1 },{ source: 'Gervais', target: 'Valjean', value: 1 },{ source: 'Listolier', target: 'Tholomyes', value: 4 },{ source: 'Fameuil', target: 'Tholomyes', value: 4 },{ source: 'Fameuil', target: 'Listolier', value: 4 },{ source: 'Blacheville', target: 'Tholomyes', value: 4 },{ source: 'Blacheville', target: 'Listolier', value: 4 },{ source: 'Blacheville', target: 'Fameuil', value: 4 },{ source: 'Favourite', target: 'Tholomyes', value: 3 },{ source: 'Favourite', target: 'Listolier', value: 3 },{ source: 'Favourite', target: 'Fameuil', value: 3 },{ source: 'Favourite', target: 'Blacheville', value: 4 },{ source: 'Dahlia', target: 'Tholomyes', value: 3 },{ source: 'Dahlia', target: 'Listolier', value: 3 },{ source: 'Dahlia', target: 'Fameuil', value: 3 },{ source: 'Dahlia', target: 'Blacheville', value: 3 },{ source: 'Dahlia', target: 'Favourite', value: 5 },{ source: 'Zephine', target: 'Tholomyes', value: 3 },{ source: 'Zephine', target: 'Listolier', value: 3 },{ source: 'Zephine', target: 'Fameuil', value: 3 },{ source: 'Zephine', target: 'Blacheville', value: 3 },{ source: 'Zephine', target: 'Favourite', value: 4 },{ source: 'Zephine', target: 'Dahlia', value: 4 },{ source: 'Fantine', target: 'Tholomyes', value: 3 },{ source: 'Fantine', target: 'Listolier', value: 3 },{ source: 'Fantine', target: 'Fameuil', value: 3 },{ source: 'Fantine', target: 'Blacheville', value: 3 },{ source: 'Fantine', target: 'Favourite', value: 4 },{ source: 'Fantine', target: 'Dahlia', value: 4 },{ source: 'Fantine', target: 'Zephine', value: 4 },{ source: 'Fantine', target: 'Marguerite', value: 2 },{ source: 'Fantine', target: 'Valjean', value: 9 },{ source: 'Mme.Thenardier', target: 'Fantine', value: 2 },{ source: 'Mme.Thenardier', target: 'Valjean', value: 7 },{ source: 'Thenardier', target: 'Mme.Thenardier', value: 13 },{ source: 'Thenardier', target: 'Fantine', value: 1 },{ source: 'Thenardier', target: 'Valjean', value: 12 },{ source: 'Cosette', target: 'Mme.Thenardier', value: 4 },{ source: 'Cosette', target: 'Valjean', value: 31 },{ source: 'Cosette', target: 'Tholomyes', value: 1 },{ source: 'Cosette', target: 'Thenardier', value: 1 },{ source: 'Javert', target: 'Valjean', value: 17 },{ source: 'Javert', target: 'Fantine', value: 5 },{ source: 'Javert', target: 'Thenardier', value: 5 },{ source: 'Javert', target: 'Mme.Thenardier', value: 1 },{ source: 'Javert', target: 'Cosette', value: 1 },{ source: 'Fauchelevent', target: 'Valjean', value: 8 },{ source: 'Fauchelevent', target: 'Javert', value: 1 },{ source: 'Bamatabois', target: 'Fantine', value: 1 },{ source: 'Bamatabois', target: 'Javert', value: 1 },{ source: 'Bamatabois', target: 'Valjean', value: 2 },{ source: 'Perpetue', target: 'Fantine', value: 1 },{ source: 'Simplice', target: 'Perpetue', value: 2 },{ source: 'Simplice', target: 'Valjean', value: 3 },{ source: 'Simplice', target: 'Fantine', value: 2 },{ source: 'Simplice', target: 'Javert', value: 1 },{ source: 'Scaufflaire', target: 'Valjean', value: 1 },{ source: 'Woman1', target: 'Valjean', value: 2 },{ source: 'Woman1', target: 'Javert', value: 1 },{ source: 'Judge', target: 'Valjean', value: 3 },{ source: 'Judge', target: 'Bamatabois', value: 2 },{ source: 'Champmathieu', target: 'Valjean', value: 3 },{ source: 'Champmathieu', target: 'Judge', value: 3 },{ source: 'Champmathieu', target: 'Bamatabois', value: 2 },{ source: 'Brevet', target: 'Judge', value: 2 },{ source: 'Brevet', target: 'Champmathieu', value: 2 },{ source: 'Brevet', target: 'Valjean', value: 2 },{ source: 'Brevet', target: 'Bamatabois', value: 1 },{ source: 'Chenildieu', target: 'Judge', value: 2 },{ source: 'Chenildieu', target: 'Champmathieu', value: 2 },{ source: 'Chenildieu', target: 'Brevet', value: 2 },{ source: 'Chenildieu', target: 'Valjean', value: 2 },{ source: 'Chenildieu', target: 'Bamatabois', value: 1 },{ source: 'Cochepaille', target: 'Judge', value: 2 },{ source: 'Cochepaille', target: 'Champmathieu', value: 2 },{ source: 'Cochepaille', target: 'Brevet', value: 2 },{ source: 'Cochepaille', target: 'Chenildieu', value: 2 },{ source: 'Cochepaille', target: 'Valjean', value: 2 },{ source: 'Cochepaille', target: 'Bamatabois', value: 1 },{ source: 'Pontmercy', target: 'Thenardier', value: 1 },{ source: 'Boulatruelle', target: 'Thenardier', value: 1 },{ source: 'Eponine', target: 'Mme.Thenardier', value: 5 },{ source: 'Eponine', target: 'Thenardier', value: 1 },{ source: 'Anzelma', target: 'Eponine', value: 1 },{ source: 'Anzelma', target: 'Thenardier', value: 1 },{ source: 'Anzelma', target: 'Mme.Thenardier', value: 1 },{ source: 'Woman2', target: 'Valjean', value: 3 },{ source: 'Woman2', target: 'Cosette', value: 1 },{ source: 'Woman2', target: 'Javert', value: 1 },{ source: 'MotherInnocent', target: 'Fauchelevent', value: 3 },{ source: 'MotherInnocent', target: 'Valjean', value: 1 },{ source: 'Gribier', target: 'Fauchelevent', value: 2 },{ source: 'Mme.Burgon', target: 'Jondrette', value: 1 },{ source: 'Jondrette', target: 'Mme.Burgon', value: 2 },{ source: 'Jondrette', target: 'Valjean', value: 1 },{ source: 'Gavroche', target: 'Mme.Burgon', value: 2 },{ source: 'Gavroche', target: 'Thenardier', value: 1 },{ source: 'Gavroche', target: 'Javert', value: 1 },{ source: 'Gavroche', target: 'Valjean', value: 2 },{ source: 'Gillenormand', target: 'Cosette', value: 3 },{ source: 'Gillenormand', target: 'Valjean', value: 2 },{ source: 'Magnon', target: 'Gillenormand', value: 1 },{ source: 'Magnon', target: 'Mme.Thenardier', value: 1 },{ source: 'Mlle.Gillenormand', target: 'Gillenormand', value: 9 },{ source: 'Mlle.Gillenormand', target: 'Cosette', value: 2 },{ source: 'Mlle.Gillenormand', target: 'Valjean', value: 2 },{ source: 'Mme.Pontmercy', target: 'Mlle.Gillenormand', value: 1 },{ source: 'Mme.Pontmercy', target: 'Pontmercy', value: 1 },{ source: 'Mlle.Vaubois', target: 'Mlle.Gillenormand', value: 1 },{ source: 'Lt.Gillenormand', target: 'Mlle.Gillenormand', value: 2 },{ source: 'Lt.Gillenormand', target: 'Gillenormand', value: 1 },{ source: 'Lt.Gillenormand', target: 'Cosette', value: 1 },{ source: 'Marius', target: 'Mlle.Gillenormand', value: 6 },{ source: 'Marius', target: 'Gillenormand', value: 12 },{ source: 'Marius', target: 'Pontmercy', value: 1 },{ source: 'Marius', target: 'Lt.Gillenormand', value: 1 },{ source: 'Marius', target: 'Cosette', value: 21 },{ source: 'Marius', target: 'Valjean', value: 19 },{ source: 'Marius', target: 'Tholomyes', value: 1 },{ source: 'Marius', target: 'Thenardier', value: 2 },{ source: 'Marius', target: 'Eponine', value: 5 },{ source: 'Marius', target: 'Gavroche', value: 4 },{ source: 'BaronessT', target: 'Gillenormand', value: 1 },{ source: 'BaronessT', target: 'Marius', value: 1 },{ source: 'Mabeuf', target: 'Marius', value: 1 },{ source: 'Mabeuf', target: 'Eponine', value: 1 },{ source: 'Mabeuf', target: 'Gavroche', value: 1 },{ source: 'Enjolras', target: 'Marius', value: 7 },{ source: 'Enjolras', target: 'Gavroche', value: 7 },{ source: 'Enjolras', target: 'Javert', value: 6 },{ source: 'Enjolras', target: 'Mabeuf', value: 1 },{ source: 'Enjolras', target: 'Valjean', value: 4 },{ source: 'Combeferre', target: 'Enjolras', value: 15 },{ source: 'Combeferre', target: 'Marius', value: 5 },{ source: 'Combeferre', target: 'Gavroche', value: 6 },{ source: 'Combeferre', target: 'Mabeuf', value: 2 },{ source: 'Prouvaire', target: 'Gavroche', value: 1 },{ source: 'Prouvaire', target: 'Enjolras', value: 4 },{ source: 'Prouvaire', target: 'Combeferre', value: 2 },{ source: 'Feuilly', target: 'Gavroche', value: 2 },{ source: 'Feuilly', target: 'Enjolras', value: 6 },{ source: 'Feuilly', target: 'Prouvaire', value: 2 },{ source: 'Feuilly', target: 'Combeferre', value: 5 },{ source: 'Feuilly', target: 'Mabeuf', value: 1 },{ source: 'Feuilly', target: 'Marius', value: 1 },{ source: 'Courfeyrac', target: 'Marius', value: 9 },{ source: 'Courfeyrac', target: 'Enjolras', value: 17 },{ source: 'Courfeyrac', target: 'Combeferre', value: 13 },{ source: 'Courfeyrac', target: 'Gavroche', value: 7 },{ source: 'Courfeyrac', target: 'Mabeuf', value: 2 },{ source: 'Courfeyrac', target: 'Eponine', value: 1 },{ source: 'Courfeyrac', target: 'Feuilly', value: 6 },{ source: 'Courfeyrac', target: 'Prouvaire', value: 3 },{ source: 'Bahorel', target: 'Combeferre', value: 5 },{ source: 'Bahorel', target: 'Gavroche', value: 5 },{ source: 'Bahorel', target: 'Courfeyrac', value: 6 },{ source: 'Bahorel', target: 'Mabeuf', value: 2 },{ source: 'Bahorel', target: 'Enjolras', value: 4 },{ source: 'Bahorel', target: 'Feuilly', value: 3 },{ source: 'Bahorel', target: 'Prouvaire', value: 2 },{ source: 'Bahorel', target: 'Marius', value: 1 },{ source: 'Bossuet', target: 'Marius', value: 5 },{ source: 'Bossuet', target: 'Courfeyrac', value: 12 },{ source: 'Bossuet', target: 'Gavroche', value: 5 },{ source: 'Bossuet', target: 'Bahorel', value: 4 },{ source: 'Bossuet', target: 'Enjolras', value: 10 },{ source: 'Bossuet', target: 'Feuilly', value: 6 },{ source: 'Bossuet', target: 'Prouvaire', value: 2 },{ source: 'Bossuet', target: 'Combeferre', value: 9 },{ source: 'Bossuet', target: 'Mabeuf', value: 1 },{ source: 'Bossuet', target: 'Valjean', value: 1 },{ source: 'Joly', target: 'Bahorel', value: 5 },{ source: 'Joly', target: 'Bossuet', value: 7 },{ source: 'Joly', target: 'Gavroche', value: 3 },{ source: 'Joly', target: 'Courfeyrac', value: 5 },{ source: 'Joly', target: 'Enjolras', value: 5 },{ source: 'Joly', target: 'Feuilly', value: 5 },{ source: 'Joly', target: 'Prouvaire', value: 2 },{ source: 'Joly', target: 'Combeferre', value: 5 },{ source: 'Joly', target: 'Mabeuf', value: 1 },{ source: 'Joly', target: 'Marius', value: 2 },{ source: 'Grantaire', target: 'Bossuet', value: 3 },{ source: 'Grantaire', target: 'Enjolras', value: 3 },{ source: 'Grantaire', target: 'Combeferre', value: 1 },{ source: 'Grantaire', target: 'Courfeyrac', value: 2 },{ source: 'Grantaire', target: 'Joly', value: 2 },{ source: 'Grantaire', target: 'Gavroche', value: 1 },{ source: 'Grantaire', target: 'Bahorel', value: 1 },{ source: 'Grantaire', target: 'Feuilly', value: 1 },{ source: 'Grantaire', target: 'Prouvaire', value: 1 },{ source: 'MotherPlutarch', target: 'Mabeuf', value: 3 },{ source: 'Gueulemer', target: 'Thenardier', value: 5 },{ source: 'Gueulemer', target: 'Valjean', value: 1 },{ source: 'Gueulemer', target: 'Mme.Thenardier', value: 1 },{ source: 'Gueulemer', target: 'Javert', value: 1 },{ source: 'Gueulemer', target: 'Gavroche', value: 1 },{ source: 'Gueulemer', target: 'Eponine', value: 1 },{ source: 'Babet', target: 'Thenardier', value: 6 },{ source: 'Babet', target: 'Gueulemer', value: 6 },{ source: 'Babet', target: 'Valjean', value: 1 },{ source: 'Babet', target: 'Mme.Thenardier', value: 1 },{ source: 'Babet', target: 'Javert', value: 2 },{ source: 'Babet', target: 'Gavroche', value: 1 },{ source: 'Babet', target: 'Eponine', value: 1 },{ source: 'Claquesous', target: 'Thenardier', value: 4 },{ source: 'Claquesous', target: 'Babet', value: 4 },{ source: 'Claquesous', target: 'Gueulemer', value: 4 },{ source: 'Claquesous', target: 'Valjean', value: 1 },{ source: 'Claquesous', target: 'Mme.Thenardier', value: 1 },{ source: 'Claquesous', target: 'Javert', value: 1 },{ source: 'Claquesous', target: 'Eponine', value: 1 },{ source: 'Claquesous', target: 'Enjolras', value: 1 },{ source: 'Montparnasse', target: 'Javert', value: 1 },{ source: 'Montparnasse', target: 'Babet', value: 2 },{ source: 'Montparnasse', target: 'Gueulemer', value: 2 },{ source: 'Montparnasse', target: 'Claquesous', value: 2 },{ source: 'Montparnasse', target: 'Valjean', value: 1 },{ source: 'Montparnasse', target: 'Gavroche', value: 1 },{ source: 'Montparnasse', target: 'Eponine', value: 1 },{ source: 'Montparnasse', target: 'Thenardier', value: 1 },{ source: 'Toussaint', target: 'Cosette', value: 2 },{ source: 'Toussaint', target: 'Javert', value: 1 },{ source: 'Toussaint', target: 'Valjean', value: 1 },{ source: 'Child1', target: 'Gavroche', value: 2 },{ source: 'Child2', target: 'Gavroche', value: 2 },{ source: 'Child2', target: 'Child1', value: 3 },{ source: 'Brujon', target: 'Babet', value: 3 },{ source: 'Brujon', target: 'Gueulemer', value: 3 },{ source: 'Brujon', target: 'Thenardier', value: 3 },{ source: 'Brujon', target: 'Gavroche', value: 1 },{ source: 'Brujon', target: 'Eponine', value: 1 },{ source: 'Brujon', target: 'Claquesous', value: 1 },{ source: 'Brujon', target: 'Montparnasse', value: 1 },{ source: 'Mme.Hucheloup', target: 'Bossuet', value: 1 },{ source: 'Mme.Hucheloup', target: 'Joly', value: 1 },{ source: 'Mme.Hucheloup', target: 'Grantaire', value: 1 },{ source: 'Mme.Hucheloup', target: 'Bahorel', value: 1 },{ source: 'Mme.Hucheloup', target: 'Courfeyrac', value: 1 },{ source: 'Mme.Hucheloup', target: 'Gavroche', value: 1 },{ source: 'Mme.Hucheloup', target: 'Enjolras', value: 1 },],},autoFit: 'view',layout: {type: 'force-atlas2',preventOverlap: true,kr: 20,center: [250, 250],ks: 0.1,ksmax: 10,tao: 0.1,mode: 'normal',},behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],autoResize: true,zoomRange: [0.1, 5],},{ width: 600, height: 400 },(gui, graph) => {const options = {type: 'force-atlas2',preventOverlap: true,kr: 20,ks: 0.1,ksmax: 10,tao: 0.1,mode: 'normal',kg: 1,barnesHut: false,dissuadeHubs: false,prune: false,};const optionFolder = gui.addFolder('ForceAtlas2 Layout Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'preventOverlap');optionFolder.add(options, 'kr', 1, 100, 1);optionFolder.add(options, 'ks', 0.01, 1, 0.01);optionFolder.add(options, 'ksmax', 1, 20, 1);optionFolder.add(options, 'tao', 0.01, 1, 0.01);optionFolder.add(options, 'kg', 0, 10, 0.1);optionFolder.add(options, 'barnesHut');optionFolder.add(options, 'dissuadeHubs');optionFolder.add(options, 'prune');optionFolder.add(options, 'mode', ['normal', 'linlog']);optionFolder.onChange(async ({ property, value }) => {graph.setLayout(Object.assign({}, graph.getLayout(), {[property]: value,}),);await graph.layout();});},);
const graph = new Graph({layout: {type: 'force-atlas2',preventOverlap: true,kr: 20,center: [250, 250],},});
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 布局类型，必须为 force-atlas2 | force-atlas2 | - | ✓ |
| barnesHut | 是否开启四叉树加速，开启后可以提升大规模图的布局性能，但可能会影响布局质量。默认情况下为 undefined，当节点数量大于 250 时它将会被激活。设置为 false 则不会自动被激活 | boolean | - | |
| dissuadeHubs | 是否开启 hub 模式。若为 true，相比与出度大的节点，入度大的节点将会有更高的优先级被放置在中心位置 | boolean | false | |
| height | 布局高度，默认使用容器高度 | number | - | |
| kg | 重力系数，kg 越大，布局越聚集在中心 | number | 1 | |
| kr | 斥力系数，可用于调整布局的紧凑程度。kr 越大，布局越松散 | number | 5 | |
| ks | 控制迭代过程中，节点移动的速度 | number | 0.1 | |
| ksmax | 迭代过程中，最大的节点移动的速度上限 | number | 10 | |
| mode | 聚类模式，linlog 模式下，聚类将更加紧凑 | normal | linlog | normal | |
| nodeSize | 节点大小（直径）。当开启 preventOverlap 时，用于计算节点之间的斥力。如果不设置，则使用节点数据中的 data.size 属性 | Size | ((node?: Node) => Size) | - | |
| onTick | 每一次迭代的回调函数 | (data: LayoutMapping) => void | - | |
| preventOverlap | 是否防止节点重叠。开启后，布局会考虑节点大小，避免节点重叠。节点大小通过 nodeSize 配置指定，如果没有设置 nodeSize，则通过节点数据中的 data.size 属性指定 | boolean | false | |
| prune | 是否开启自动剪枝模式。默认情况下为 undefined，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量。设置为 false 则不会自动被激活 | boolean | - | |
| tao | 迭代接近收敛时停止震荡的容忍度 | number | 0.1 | |
| width | 布局宽度，默认使用容器宽度 | number | - | |
| center | 布局中心点，用于指定重力的中心，格式为 [x, y]。每个节点都会受到一个指向该中心点的重力，重力大小由 kg 参数控制。如果不设置，则使用画布中心点 | [number, number] | - |
import { Graph } from '@antv/g6';const graph = new Graph({layout: {type: 'force-atlas2',preventOverlap: true,kr: 20,},autoFit: 'view',data: {nodes: [{ id: 'node1' },{ id: 'node2' },{ id: 'node3' },{ id: 'node4' },{ id: 'node5' },{ id: 'node6' },{ id: 'node7' },{ id: 'node8' },{ id: 'node9' },{ id: 'node10' },{ id: 'node11' },{ id: 'node12' },{ id: 'node13' },{ id: 'node14' },{ id: 'node15' },],edges: [{ source: 'node1', target: 'node2' },{ source: 'node2', target: 'node3' },{ source: 'node3', target: 'node4' },{ source: 'node4', target: 'node5' },{ source: 'node5', target: 'node6' },{ source: 'node6', target: 'node7' },{ source: 'node7', target: 'node8' },{ source: 'node8', target: 'node9' },{ source: 'node9', target: 'node10' },{ source: 'node10', target: 'node11' },{ source: 'node11', target: 'node12' },{ source: 'node12', target: 'node13' },{ source: 'node13', target: 'node14' },{ source: 'node14', target: 'node15' },{ source: 'node15', target: 'node1' },{ source: 'node1', target: 'node8' },{ source: 'node2', target: 'node9' },{ source: 'node3', target: 'node10' },{ source: 'node4', target: 'node11' },{ source: 'node5', target: 'node12' },{ source: 'node6', target: 'node13' },{ source: 'node7', target: 'node14' },],},behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],});
效果如下：
import { Graph } from '@antv/g6';const graph = new Graph({container: 'container',width: 400,height: 300,layout: {type: 'force-atlas2',preventOverlap: true,kr: 20,},data: {nodes: [{ id: 'node1' },{ id: 'node2' },{ id: 'node3' },{ id: 'node4' },{ id: 'node5' },{ id: 'node6' },{ id: 'node7' },{ id: 'node8' },{ id: 'node9' },{ id: 'node10' },{ id: 'node11' },{ id: 'node12' },{ id: 'node13' },{ id: 'node14' },{ id: 'node15' },],edges: [{ source: 'node1', target: 'node2' },{ source: 'node2', target: 'node3' },{ source: 'node3', target: 'node4' },{ source: 'node4', target: 'node5' },{ source: 'node5', target: 'node6' },{ source: 'node6', target: 'node7' },{ source: 'node7', target: 'node8' },{ source: 'node8', target: 'node9' },{ source: 'node9', target: 'node10' },{ source: 'node10', target: 'node11' },{ source: 'node11', target: 'node12' },{ source: 'node12', target: 'node13' },{ source: 'node13', target: 'node14' },{ source: 'node14', target: 'node15' },{ source: 'node15', target: 'node1' },{ source: 'node1', target: 'node8' },{ source: 'node2', target: 'node9' },{ source: 'node3', target: 'node10' },{ source: 'node4', target: 'node11' },{ source: 'node5', target: 'node12' },{ source: 'node6', target: 'node13' },{ source: 'node7', target: 'node14' },],},behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],});graph.render();