Dev Faq
7
votes

Visualisez un graphique cliquable dans une page HTML

J'ai défini une structure de données utilisant pygraph . Je peux afficher les données facilement comme png à l'aide de graphviz .

graphe de noeud

Je voudrais afficher les données graphiquement, mais faire chaque nœud dans le graphique cliquable. Chaque nœud doit être lié à une page Web différente. Comment puis-je approcher cela?

Ce que je voudrais, c'est:

  1. Attribuer un href pour chaque nœud
  2. Affiche tout le graphique comme image
  3. Faites chaque nœud dans l'image cliquable sur
  4. info-bulles pour HOVER Événement: Chaque fois que le curseur est positionné au-dessus d'un bord / nœud, une info-bulle doit être affichée
0 commentaires

4 Réponses :

1
votes

Vous pouvez utiliser des cartes clic: 

 <img src="graph.png" width="400" height="300" usemap="#mygraphmap">

<map name="mygraphmap">
  <area shape="circle" coords="100,100,30" href="f8a08.htm">
  <area shape="circle" coords="200,100,30" href="1d0f.htm">
</map>

0 commentaires
7
votes

Je pense que GraphViz peut déjà émiter une image en tant que carte à utiliser dans HTML.

vérifier ce doc ou Celui-ci pour savoir comment dire GraphViz de produire une carte de coordonnée à utiliser. Il ajoutera même l'URL que vous spécifiez et il y a même un version qui utilise seulement des rectangles pour la mapping liens

EDIT:

Vous pouvez également vérifier Ce document par Lanyethomas qui décrit les étapes de base:

Créer un fichier DOT GRAPHVIZ avec les informations de liaison requises, peut-être avec un script.

exécuter graphviz une fois pour générer une image du graphique.

Run Graphviz à nouveau pour générer une carte d'image HTML du graphique.

Créer une page index.html (ou wiki) avec une balise IMG du graphique, suivi du HTML de la carte image.

Diriger les URL de la carte image sur un wiki page avec le nom de chaque nœud - Générez automatiquement les pages Wiki SI avait besoin.

éventuellement, associez directement à l'image de la hiérarchie de la classe généré par Doxygen. Avoir le lien de page wiki à tout supplémentaire Documentation, y compris Doxygen Docs, Images, etc.

0 commentaires
-3
votes

Si vous recherchez une alternative GRAPHVIZ, vous pouvez utiliser bibliothèque JSPLumb . Voir certains Échantillons ici

Variez également Toolkit InfoVis JavaScript

0 commentaires
5
votes

Vous pouvez utiliser pygrapheviz et cmapx xxx pré>

puis utilisez le contenu de my_graph.map dans HTML P> 

<IMG SRC="my_graph.svg" USEMAP="#my_graph" />
... [content of my_graph.map] ...

1 commentaires

L'équivalent de commande serait / usr / local / bin / dot -o -o -png -tcmapx my.dot

Articles qui pourrait vous intéresser :

Python: ConnectionError: HTTPSConnectionPool (hôte = 'api.foursquare-com', port = 443)
L'exécution de Flask sous Windows n'exécute pas la commande d'exécution de flask
Chatbot installé mais obtention d'une erreur lors de l'importation de ChatBot
Administrateur Django: __str__ a renvoyé une non-chaîne (type int)