ForceAtlas2 Force-directed Layout
Previous
Force Force-directed Layout
Next
Fruchterman Force-directed Layout
Loading...
ForceAtlas2 is a force-directed layout algorithm that optimizes node positions by simulating forces in a physical system. This layout is especially suitable for visualizing large-scale network data, effectively revealing relationships and cluster structures among nodes.
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],},});
| Property | Description | Type | Default | Required |
|---|---|---|---|---|
| type | Layout type, must be force-atlas2 | force-atlas2 | - | ✓ |
| barnesHut | Whether to enable quadtree acceleration. When enabled, improves performance for large graphs but may affect layout quality. By default, enabled if node count > 250. | boolean | - | |
| dissuadeHubs | Whether to enable hub mode. If true, nodes with higher in-degree are more likely to be placed at the center than those with high out-degree | boolean | false | |
| height | Layout height. Defaults to container height | number | - | |
| kg | Gravity coefficient. The larger the value, the more concentrated the layout is at the center | number | 1 | |
| kr | Repulsion coefficient. Adjusts the compactness of the layout. The larger the value, the looser the layout | number | 5 | |
| ks | Controls the speed of node movement during iteration | number | 0.1 | |
| ksmax | Maximum node movement speed during iteration | number | 10 | |
| mode | Clustering mode. In linlog mode, clusters are more compact | normal | linlog | normal | |
| nodeSize | Node size (diameter). Used for repulsion calculation when preventOverlap is enabled. If not set, uses data.size in node data | Size | ((node?: Node) => Size) | - | |
| onTick | Callback for each iteration | (data: LayoutMapping) => void | - | |
| preventOverlap | Whether to prevent node overlap. When enabled, layout considers node size to avoid overlap. Node size is specified by nodeSize or data.size in node data | boolean | false | |
| prune | Whether to enable auto-pruning. By default, enabled if node count > 100. Pruning speeds up convergence but may reduce layout quality. Set to false to disable auto-activation | boolean | - | |
| tao | Tolerance for stopping oscillation when layout is near convergence | number | 0.1 | |
| width | Layout width. Defaults to container width | number | - | |
| center | Layout center, format [x, y]. Each node is attracted to this point, gravity controlled by kg. If not set, uses canvas center | [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'],});
Result:
createGraph({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'],},{ width: 400, height: 300 },);