102.3K+Télécharger
Aller au guide d’utilisation
AntV G6 Graphpar antvis

AntV G6 Graph Skill.

Créez des vues interactives de réseaux et de hiérarchies existants à partir de données de nœuds et d'arêtes.

  • Visualisation de graphes
  • Réseaux
  • AntV
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · AntV G6 GraphSKILL.md
Tâche Visualisation de graphes Produit • Une vue de graphe G6 JavaScript configurée pour un jeu de données de relations fourni • Un choix de disposition et d'encodage visuel pour les nœuds, les arêtes et les groupes • Des comportements d'exploration explicites, comme le zoom, le déplacement ou la sélection Avant de commencer Une application utilisant @antv/g6 v5, un conteneur de graphe dans le navigateur et un accès réseau si le service documenté de récupération de références est nécessaire. Vérifiez les API par rapport à la version installée.
Résumé éditorial · source revue 2026-10-07 · pas un exemple généré

01 Fonctionnement

AntV G6 Graph : explorer des données connectées

Un guide de vue de graphe G6 v5 avec des données nœuds-arêtes explicites, une configuration déclarative, des mises en garde sur la migration et la récupération de références propres à chaque tâche.

Flux de travail fondé sur la sourcePas un test de performance d'exécution

La méthode de travail

AntV G6 Graph se concentre sur la visualisation de données connectées : réseaux, arbres, hiérarchies, cartes mentales et autres structures nœuds-arêtes. Le skill capturé cible G6 v5 et organise le graphe par une configuration déclarative des données, de la disposition, de l'apparence, des comportements et des plugins. Sa question centrale : comment afficher et explorer une structure de relations.

L'entrée associe des mises en garde concrètes sur la migration vers la v5 à un service distant de récupération de références pour les sujets spécialisés. Elle distingue G6 des graphiques statistiques de G2 et des éditeurs de diagrammes de X6. Une image nœuds-arêtes peut ressembler à un canevas d'éditeur, mais afficher un réseau existant est une tâche différente de celle qui consiste à laisser les utilisateurs construire et enregistrer un workflow.

Livrables attendus

  • Une vue de graphe G6 JavaScript configurée pour un jeu de données de relations fourni
  • Un choix de disposition et d'encodage visuel pour les nœuds, les arêtes et les groupes
  • Des comportements d'exploration explicites, comme le zoom, le déplacement ou la sélection
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Valider les données de relations

    Identifiez chaque nœud par un ID unique et assurez-vous que les extrémités des arêtes désignent bien les nœuds voulus. Séparez les libellés et les attributs visuels de la relation elle-même.

  2. 02
    Choisir la vue

    Associez la structure à une disposition en force, en arbre, hiérarchique, radiale ou autre disposition adaptée. Récupérez la référence G6 pertinente lorsque les détails de configuration dépassent le fichier d'entrée.

  3. 03
    Configurer G6 v5

    Utilisez les conventions documentées de données, de style, de comportement et de rendu pour la version cible, plutôt que de mélanger une configuration v4 retenue de mémoire.

  4. 04
    Inspecter le graphe

    Vérifiez les libellés affichés, les relations entre extrémités, la lisibilité de la disposition et les interactions prévues dans l'environnement d'exécution réel du navigateur. Examinez les parties denses ou déconnectées, pas seulement un échantillon bien ordonné.

02 Cas d’usage

Quand l'utiliser

Une application utilisant @antv/g6 v5, un conteneur de graphe dans le navigateur et un accès réseau si le service documenté de récupération de références est nécessaire. Vérifiez les API par rapport à la version installée.

Un bon choix

  • Exploration de relationsUtile pour présenter des entités et leurs liens lorsque la structure du réseau est elle-même le sujet de l'interface.
  • Vues en arbre et hiérarchiquesLa source oriente les demandes d'arbres, de cartes mentales, de diagrammes en arêtes de poisson et de hiérarchies vers des consignes de disposition spécialisées.
  • Travaux de migration G6Ses différences explicites sur les données, les libellés, les comportements et les options de disposition sont utiles pour relire du code G6 plus ancien.

Limites à vérifier

  • Pas un flux de travail d'éditeur de diagrammesChoisissez les consignes de l'éditeur X6 lorsque l'exigence principale est de créer des nœuds connectés, des ports et un état de diagramme modifiable.
  • Pas des graphiques statistiquesCe skill exclut explicitement les graphiques G2 et les tableaux croisés dynamiques S2 ; une disposition de graphe ne remplace pas un encodage de graphique quantitatif.
  • Vérifications de version et d'exécutionLa source cible la v5. Ses contraintes et exemples sont du matériel de référence, pas la preuve qu'un projet précis ou une version plus ancienne a été testé.

Fournissez ces éléments

  • Entités et liensFournissez les identifiants de nœuds, les extrémités d'arêtes, les libellés et toute relation de groupe significative.
  • Tâche d'explorationExpliquez si les lecteurs doivent inspecter un réseau, suivre une hiérarchie, repérer des groupes ou examiner des connexions sélectionnées.
  • Contraintes du projetIndiquez la version de G6 installée, le conteneur du graphe, la taille de données attendue et les interactions requises dans le navigateur.

03 Décisions importantes

Les décisions qui comptent

  1. Les données avant la disposition

    Un réseau visuellement plausible peut quand même être faux si les identifiants ou les extrémités sont incohérents. Le contrat de données explicite rend ces erreurs inspectables.

  2. Les détails de migration sont visibles

    Le placement des libellés et la configuration des comportements ont changé entre les générations d'API ; la source signale ces différences au lieu de traiter tous les exemples G6 comme interchangeables.

  3. Récupération ciblée de références

    L'entrée associe une tâche, comme replier-déplier ou le style des nœuds, à une requête de référence ciblée, plutôt que d'exiger toutes les fonctions de graphe à la fois.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Récupérez le répertoire du skill antv-g6-graph depuis le dépôt et configurez séparément l'environnement d'exécution G6 pour votre projet. L'exemple CDN de l'entrée sert au chargement à l'exécution ; ce n'est pas une commande d'installation du skill vérifiée.

Fichier source en amont
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g6-graph/SKILL.md

Une application utilisant @antv/g6 v5, un conteneur de graphe dans le navigateur et un accès réseau si le service documenté de récupération de références est nécessaire. Vérifiez les API par rapport à la version installée.

Commencer par un seul livrable

Adaptez la portée, les sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief
Utilisez antv-g6-graph pour créer une vue en lecture seule d'un réseau de dépendances à partir des nœuds et arêtes fournis. Vérifiez chaque extrémité, inspectez la version de G6 installée et expliquez le choix de disposition. Ajoutez uniquement les comportements de zoom, de déplacement et de sélection nécessaires pour inspecter les dépendances. Consultez les références v5 pertinentes au lieu de copier des options v4, et présentez séparément les vérifications d'exécution et les hypothèses non testées.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque arête affichée correspond à des extrémités d'entrée valides.
  • La disposition et les libellés rendent lisible la structure réelle des relations.
  • Les comportements configurés fonctionnent dans l'environnement G6 installé sans options héritées non prises en charge.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles le sont.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
antvis
Dépôt
antvis/chart-visualization-skills
Fichier du skill
skills/antv-g6-graph/SKILL.md
Licence
MIT
Version revue
2026-10-07 · a105fa12a9fa
Résumé éditorial de la source
Un guide de vue de graphe G6 v5 avec des données nœuds-arêtes explicites, une configuration déclarative, des mises en garde sur la migration et la récupération de références propres à chaque tâche.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

En quoi est-ce différent de G2 ?

G6 est utilisé ici pour des entités connectées et des dispositions de graphes. La source exclut explicitement les cas d'usage de graphiques statistiques de G2.

Dois-je l'utiliser pour créer un canevas de workflow modifiable ?

Si l'essentiel est la création de nœuds, les ports de connexion, les plugins d'éditeur et l'état enregistré du diagramme, la source confie cette tâche à X6.

Le skill contient-il toutes les références de l'API G6 ?

Non. Il comprend les modèles essentiels et un service de récupération pour une documentation plus détaillée sur les dispositions, les styles, les événements, les comportements et les plugins.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source en amont
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g6-graph/SKILL.md