mirror of
https://gitee.com/antv/g6.git
synced 2024-12-16 02:21:25 +08:00
0b89bf7f86
* refactor: remove unused demos * refactor: adjust onresize handle * refactor: update 3d data resource * docs: update demos imports * refactor: handle resize uniformly and import module name * fix: fix issue that demo cannot get container * refactor: remove unused demos of algorithm and case
79 lines
1.4 KiB
JavaScript
79 lines
1.4 KiB
JavaScript
import { Graph } from '@antv/g6';
|
|
|
|
const data = {
|
|
nodes: [
|
|
{
|
|
id: 'node1',
|
|
data: {
|
|
x: 100,
|
|
y: 150,
|
|
label: `This label is too long to be displayed`,
|
|
size: 50,
|
|
},
|
|
},
|
|
{
|
|
id: 'node2',
|
|
data: {
|
|
x: 400,
|
|
y: 150,
|
|
label: 'This label is too long to be displayed',
|
|
size: 100,
|
|
},
|
|
},
|
|
],
|
|
edges: [
|
|
{
|
|
id: 'edge1',
|
|
source: 'node1',
|
|
target: 'node2',
|
|
data: {
|
|
label: 'This label is too long to be displayed',
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const container = document.getElementById('container');
|
|
const width = container.scrollWidth;
|
|
const height = container.scrollHeight || 500;
|
|
|
|
const graph = new Graph({
|
|
container,
|
|
width,
|
|
height,
|
|
modes: {
|
|
default: ['drag-node'],
|
|
},
|
|
node: {
|
|
type: 'rect-node',
|
|
keyShape: {
|
|
width: {
|
|
fields: ['size'],
|
|
formatter: (model) => model.data.size,
|
|
},
|
|
},
|
|
labelShape: {
|
|
position: 'center',
|
|
maxLines: 4,
|
|
text: {
|
|
fields: ['label'],
|
|
formatter: (model) => model.data.label,
|
|
},
|
|
maxWidth: '80%',
|
|
},
|
|
},
|
|
edge: {
|
|
labelShape: {
|
|
position: 'center',
|
|
maxLines: 4,
|
|
text: {
|
|
fields: ['label'],
|
|
formatter: (model) => model.data.label,
|
|
},
|
|
wordWrapWidth: 80,
|
|
},
|
|
},
|
|
data,
|
|
});
|
|
|
|
window.graph = graph; |