mirror of
https://gitee.com/antv/g6.git
synced 2024-12-14 17:40:49 +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
598 lines
8.9 KiB
JavaScript
598 lines
8.9 KiB
JavaScript
import { Graph, Extensions, extend } from '@antv/g6';
|
||
import { MapView } from '@antv/g6-plugin-map-view';
|
||
|
||
const ExtGraph = extend(Graph, {
|
||
plugins: {
|
||
'map-view': MapView,
|
||
},
|
||
behaviors: {
|
||
'hover-activate': Extensions.HoverActivate,
|
||
},
|
||
});
|
||
|
||
const data = {
|
||
nodes: [
|
||
{
|
||
id: '0',
|
||
data: {
|
||
cluster: 'a',
|
||
lng: 91.111891,
|
||
lat: 29.662557,
|
||
},
|
||
},
|
||
{
|
||
id: '1',
|
||
data: {
|
||
cluster: 'a',
|
||
lng: 97.342625,
|
||
lat: 37.373799,
|
||
},
|
||
},
|
||
{
|
||
id: '2',
|
||
data: {
|
||
cluster: 'a',
|
||
lng: 104.067923,
|
||
lat: 23.679943,
|
||
},
|
||
},
|
||
{
|
||
id: '3',
|
||
data: {
|
||
cluster: 'a',
|
||
lng: 106.530635,
|
||
lat: 29.544606,
|
||
},
|
||
},
|
||
{
|
||
id: '4',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '5',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '6',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '7',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '8',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '9',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '10',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '11',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '12',
|
||
data: {
|
||
cluster: 'a',
|
||
},
|
||
},
|
||
{
|
||
id: '13',
|
||
data: {
|
||
cluster: 'b',
|
||
},
|
||
},
|
||
{
|
||
id: '14',
|
||
data: {
|
||
cluster: 'b',
|
||
lng: 90.111891,
|
||
lat: 31.662557,
|
||
},
|
||
},
|
||
{
|
||
id: '15',
|
||
data: {
|
||
cluster: 'b',
|
||
lng: 92.111891,
|
||
lat: 35.662557,
|
||
},
|
||
},
|
||
{
|
||
id: '16',
|
||
data: {
|
||
cluster: 'b',
|
||
},
|
||
},
|
||
{
|
||
id: '17',
|
||
data: {
|
||
cluster: 'b',
|
||
},
|
||
},
|
||
{
|
||
id: '18',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '19',
|
||
data: {
|
||
cluster: 'c',
|
||
lng: 88.111891,
|
||
lat: 31.662557,
|
||
},
|
||
},
|
||
{
|
||
id: '20',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '21',
|
||
data: {
|
||
cluster: 'c',
|
||
lng: 89.111891,
|
||
lat: 30.662557,
|
||
},
|
||
},
|
||
{
|
||
id: '22',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '23',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '24',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '25',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '26',
|
||
data: {
|
||
cluster: 'c',
|
||
lng: 91.111891,
|
||
lat: 29.662557,
|
||
},
|
||
},
|
||
{
|
||
id: '27',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '28',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '29',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '30',
|
||
data: {
|
||
cluster: 'c',
|
||
},
|
||
},
|
||
{
|
||
id: '31',
|
||
data: {
|
||
cluster: 'd',
|
||
},
|
||
},
|
||
{
|
||
id: '32',
|
||
data: {
|
||
cluster: 'd',
|
||
lng: 87.111891,
|
||
lat: 33.662557,
|
||
},
|
||
},
|
||
{
|
||
id: '33',
|
||
data: {
|
||
cluster: 'd',
|
||
lng: 85.111891,
|
||
lat: 25.662557,
|
||
},
|
||
},
|
||
],
|
||
edges: [
|
||
{
|
||
id: 'edge-583',
|
||
source: '0',
|
||
target: '1',
|
||
},
|
||
{
|
||
id: 'edge-0',
|
||
source: '0',
|
||
target: '2',
|
||
},
|
||
{
|
||
id: 'edge-888',
|
||
source: '0',
|
||
target: '3',
|
||
},
|
||
{
|
||
id: 'edge-560',
|
||
source: '0',
|
||
target: '4',
|
||
},
|
||
{
|
||
id: 'edge-34',
|
||
source: '0',
|
||
target: '5',
|
||
},
|
||
{
|
||
id: 'edge-654',
|
||
source: '0',
|
||
target: '7',
|
||
},
|
||
{
|
||
id: 'edge-317',
|
||
source: '0',
|
||
target: '8',
|
||
},
|
||
{
|
||
id: 'edge-962',
|
||
source: '0',
|
||
target: '9',
|
||
},
|
||
{
|
||
id: 'edge-746',
|
||
source: '0',
|
||
target: '10',
|
||
},
|
||
{
|
||
id: 'edge-75',
|
||
source: '0',
|
||
target: '11',
|
||
},
|
||
{
|
||
id: 'edge-80',
|
||
source: '0',
|
||
target: '13',
|
||
},
|
||
{
|
||
id: 'edge-674',
|
||
source: '0',
|
||
target: '14',
|
||
},
|
||
{
|
||
id: 'edge-795',
|
||
source: '0',
|
||
target: '15',
|
||
},
|
||
{
|
||
id: 'edge-886',
|
||
source: '0',
|
||
target: '16',
|
||
},
|
||
{
|
||
id: 'edge-630',
|
||
source: '2',
|
||
target: '3',
|
||
},
|
||
{
|
||
id: 'edge-710',
|
||
source: '4',
|
||
target: '5',
|
||
},
|
||
{
|
||
id: 'edge-284',
|
||
source: '4',
|
||
target: '6',
|
||
},
|
||
{
|
||
id: 'edge-758',
|
||
source: '5',
|
||
target: '6',
|
||
},
|
||
{
|
||
id: 'edge-288',
|
||
source: '7',
|
||
target: '13',
|
||
},
|
||
{
|
||
id: 'edge-103',
|
||
source: '8',
|
||
target: '14',
|
||
},
|
||
{
|
||
id: 'edge-873',
|
||
source: '9',
|
||
target: '10',
|
||
},
|
||
{
|
||
id: 'edge-108',
|
||
source: '10',
|
||
target: '22',
|
||
},
|
||
{
|
||
id: 'edge-214',
|
||
source: '10',
|
||
target: '14',
|
||
},
|
||
{
|
||
id: 'edge-928',
|
||
source: '10',
|
||
target: '12',
|
||
},
|
||
{
|
||
id: 'edge-717',
|
||
source: '10',
|
||
target: '24',
|
||
},
|
||
{
|
||
id: 'edge-752',
|
||
source: '10',
|
||
target: '21',
|
||
},
|
||
{
|
||
id: 'edge-424',
|
||
source: '10',
|
||
target: '20',
|
||
},
|
||
{
|
||
id: 'edge-755',
|
||
source: '11',
|
||
target: '24',
|
||
},
|
||
{
|
||
id: 'edge-822',
|
||
source: '11',
|
||
target: '22',
|
||
},
|
||
{
|
||
id: 'edge-366',
|
||
source: '11',
|
||
target: '14',
|
||
},
|
||
{
|
||
id: 'edge-411',
|
||
source: '12',
|
||
target: '13',
|
||
},
|
||
{
|
||
id: 'edge-781',
|
||
source: '16',
|
||
target: '17',
|
||
},
|
||
{
|
||
id: 'edge-742',
|
||
source: '16',
|
||
target: '18',
|
||
},
|
||
{
|
||
id: 'edge-762',
|
||
source: '16',
|
||
target: '21',
|
||
},
|
||
{
|
||
id: 'edge-519',
|
||
source: '16',
|
||
target: '22',
|
||
},
|
||
{
|
||
id: 'edge-187',
|
||
source: '17',
|
||
target: '18',
|
||
},
|
||
{
|
||
id: 'edge-919',
|
||
source: '17',
|
||
target: '20',
|
||
},
|
||
{
|
||
id: 'edge-854',
|
||
source: '18',
|
||
target: '19',
|
||
},
|
||
{
|
||
id: 'edge-199',
|
||
source: '19',
|
||
target: '20',
|
||
},
|
||
{
|
||
id: 'edge-475',
|
||
source: '19',
|
||
target: '33',
|
||
},
|
||
{
|
||
id: 'edge-55',
|
||
source: '19',
|
||
target: '22',
|
||
},
|
||
{
|
||
id: 'edge-528',
|
||
source: '19',
|
||
target: '23',
|
||
},
|
||
{
|
||
id: 'edge-741',
|
||
source: '20',
|
||
target: '21',
|
||
},
|
||
{
|
||
id: 'edge-920',
|
||
source: '21',
|
||
target: '22',
|
||
},
|
||
{
|
||
id: 'edge-457',
|
||
source: '22',
|
||
target: '24',
|
||
},
|
||
{
|
||
id: 'edge-524',
|
||
source: '22',
|
||
target: '25',
|
||
},
|
||
{
|
||
id: 'edge-814',
|
||
source: '22',
|
||
target: '26',
|
||
},
|
||
{
|
||
id: 'edge-258',
|
||
source: '22',
|
||
target: '23',
|
||
},
|
||
{
|
||
id: 'edge-222',
|
||
source: '22',
|
||
target: '28',
|
||
},
|
||
{
|
||
id: 'edge-803',
|
||
source: '22',
|
||
target: '30',
|
||
},
|
||
{
|
||
id: 'edge-693',
|
||
source: '22',
|
||
target: '31',
|
||
},
|
||
{
|
||
id: 'edge-491',
|
||
source: '22',
|
||
target: '32',
|
||
},
|
||
{
|
||
id: 'edge-46',
|
||
source: '22',
|
||
target: '33',
|
||
},
|
||
{
|
||
id: 'edge-145',
|
||
source: '23',
|
||
target: '28',
|
||
},
|
||
{
|
||
id: 'edge-45',
|
||
source: '23',
|
||
target: '27',
|
||
},
|
||
{
|
||
id: 'edge-98',
|
||
source: '23',
|
||
target: '29',
|
||
},
|
||
{
|
||
id: 'edge-993',
|
||
source: '23',
|
||
target: '30',
|
||
},
|
||
{
|
||
id: 'edge-514',
|
||
source: '23',
|
||
target: '31',
|
||
},
|
||
{
|
||
id: 'edge-361',
|
||
source: '23',
|
||
target: '33',
|
||
},
|
||
{
|
||
id: 'edge-154',
|
||
source: '32',
|
||
target: '33',
|
||
},
|
||
],
|
||
};
|
||
|
||
const container = document.getElementById('container');
|
||
const width = container.scrollWidth;
|
||
const height = container.scrollHeight || 500;
|
||
|
||
const graph = new ExtGraph({
|
||
container,
|
||
width: width / 2,
|
||
height,
|
||
data,
|
||
theme: {
|
||
type: 'spec',
|
||
specification: {
|
||
node: {
|
||
dataTypeField: 'cluster',
|
||
},
|
||
},
|
||
},
|
||
plugins: [
|
||
{
|
||
type: 'map-view',
|
||
size: [width / 2, height],
|
||
// 地图必须提供以下 token,默认的 token 是不稳定的,在您的生产环境中,务必申请自己的 token 进行替换,以确保服务稳定。高德地图申请地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare
|
||
// token for Gaode map is requied, the default token is unstable. You should apply a official token in your system to ensure the stableness. Address to apply: https://lbs.amap.com/api/javascript-api/guide/abc/prepare
|
||
// token: 'xxxx',
|
||
},
|
||
],
|
||
modes: {
|
||
default: [
|
||
{
|
||
type: 'drag-node',
|
||
},
|
||
'zoom-canvas',
|
||
'drag-canvas',
|
||
'click-select',
|
||
'hover-activate',
|
||
],
|
||
},
|
||
layout: {
|
||
type: 'force',
|
||
},
|
||
node: {
|
||
lodLevels: [],
|
||
labelShape: {
|
||
text: {
|
||
fields: ['id'],
|
||
formatter: (model) => model.id,
|
||
},
|
||
},
|
||
},
|
||
autoFit: 'view',
|
||
});
|
||
|
||
window.graph = graph; |