Comment exporter un graphique en svg/graphml

Question

Je suis un peu bloqué sur la façon d'exporter des graphiques en svg ou graphml. Ni l'api, les exemples ou les discussions sur le forum.jgraph.com ne m'ont aidé jusqu'à présent.

J'ai besoin d'exporter des graphiques à la fois en svg et en graphml. J'ai réussi à afficher les nœuds et les arêtes en svg, même avec la mise en page correcte, mais il me manque des informations comme les noms des nœuds et les couleurs attribuées.

Avec graphml, je n'ai pas encore d'idée de comment obtenir le code xml correct pour afficher même un graphique fonctionnel.

Y a-t-il des lignes directrices / workflows quelque part qui pourraient m'aider avec l'exportation dans JGraphX?

Merci d'avance pour toute aide,

Chris

Answer 1

Pour enregistrer votre graphique, vous devez appeler mxCellRendered pour rendre votre graphique sur un mxicanvas à partir duquel vous obtenez votre document (document dom). Du Renderer, ça se passe comme ça : mxGraph.drawCell() -> mxGraph.drawState() -> mxICanvas.drawCell() -> mxICanvas.drawShape() mxICanvas ne connaît que la géométrie et le style de la cellule.

Je voulais ajouter l'attribut id de la cellule dans le fichier svg, donc j'ai fait ce qui suit

1. j'ai étendu le mxGraph pour remplacer la fonction drawCell() afin d'ajouter l'identifiant de la cellule dans le style de la cellule, et
2. j'ai étendu le mxSvgCanvas pour ajouter l'attribut id pour les formes qui m'intéressaient

La fonction pour enregistrer le graphique en svg se présente comme suit:

// utiliser le canvas svg étendu, où l'identifiant de la cellule est ajouté en tant qu'attribut
public void createSVG(mxGraphExtended g) {
  String filename = "\home\koula\graph.svg";
  mxSvgCanvasExtended canvas = (mxSvgCanvasExtended) mxCellRenderer.drawCells(
    g, null, 1, null, new CanvasFactory() {
    public mxICanvas createCanvas(int width, int height) {
        mxSvgCanvasExtended canvas = new mxSvgCanvasExtended(mxDomUtils
            .createSvgDocument(width, height));
            canvas.setEmbedded(true);
            return canvas;
        } 
    });
  try {
    mxUtils.writeFile(mxXmlUtils.getXml(canvas.getDocument()), filename);
  } catch (IOException e) {
    e.printStackTrace();
  } 
}

Le drawCell() remplacé :

public class mxGraphExtended extends mxGraph {

    @Override
    public void drawCell(mxICanvas canvas, Object cell) {
        // ajouter l'identifiant de la cellule en tant qu'attribut de style
        // car le canvas ne reçoit que le style et la géométrie
        mxCellState state = this.getView().getState(cell);
        state.getStyle().put("cellid", ((mxCell)cell).getId());

        super.drawCell(canvas, cell);
    }
}

Le drawShape() remplacé se présente comme suit:

public class mxSvgCanvasExtended extends mxSvgCanvas {

    //... uniquement le code pertinent copié

    @Override
    public Element drawShape(int x, int y, int w, int h, 
        Map style)
    {
         //... 

         // Dessine la forme
         String shape = mxUtils.getString(style, mxConstants.STYLE_SHAPE, "");
         String cellid = mxUtils.getString(style, "cellid", "");
         Element elem = null;
         // ... 

        // par exemple, si c'est une image, ajouter l'identifiant de la cellule 
        if (shape.equals(mxConstants.SHAPE_IMAGE)) {
            String img = getImageForStyle(style);
            if (img != null) {
                // Retournement vertical et horizontal de l'image
                boolean flipH = mxUtils.isTrue(style, 
                    mxConstants.STYLE_IMAGE_FLIPH, false);
                boolean flipV = mxUtils.isTrue(style, 
                    mxConstants.STYLE_IMAGE_FLIPV, false);
                elem = createImageElement(x, y, w, h, img,
                    PRESERVE_IMAGE_ASPECT, flipH, flipV, isEmbedded());
                /* nous y sommes ici */ 
                // ajouter l'attribut id de la cellule 
                if(!cellid.equals("")) {
                    elem.setAttribute("id", cellid);
                }
            }
        } else if (shape.equals(mxConstants.SHAPE_LINE))
            // ... 
        }// fin drawShape

     } // fin de la classe

J'espère que cela vous aidera.