Para un requisito de trabajo que implica dibujar un gráfico en el lado frontal, uso la biblioteca mxGraph.js. Mi tarea consiste, entre otras cosas, en traducir un gráfico del contenedor1 al contenedor2 (que tiene diferentes dimensiones). Aquí está mi código.
var graph = new mxGraph(document.getElementById('container1')); var doc = mxUtils.createXmlDocument(); var node = doc.createElement('RootNode'); node.setAttribute('label', 'RootNode'); node.setAttribute('attribute1', 'value1'); mxGeometry.prototype.relative = true; graph.insertVertex(graph.getDefaultParent(), null, node, $('#container1').width()/2 - 20, 40, 55, 22,"shape=rectangle"); var graphBis = new mxGraph(document.getElementById('container2')); var enc = new mxCodec(mxUtils.createXmlDocument()); var node = enc.encode(graph.getModel()); var xmlString = mxUtils.getXml(node); loadXMLGraph(graphBis, xmlString); graphBis.center(); function loadXMLGraph(graphBis, xmlString) { var doc = mxUtils.parseXml(xmlString); var codec = new mxCodec(doc); codec.decode(doc.documentElement, graphBis.getModel()); var elt = doc.documentElement.firstChild; var cells = []; while (elt != null) { var cell = codec.decode(elt) if (cell != undefined) { if (cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)) { elt = elt.nextSibling; continue; } cells.push(cell); } elt = elt.nextSibling; } graphBis.addCells(cells); }El código HTML es el siguiente:
<html> <head> <script type="text/javascript" src="./mxClient.js"></script> </head> <body> <div class="container1"> <div class="container2"> </div> </div> </body> </html>CSS no está incluido aquí, pero básicamente, las dimensiones del contenedor2 son más pequeñas que las del contenedor1. Primero trato de codificar el gráfico inicial como el documento XML equivalente para reproducirlo y colocarlo dentro del contenedor2, pero las dimensiones fallan aquí y el nodo raíz del gráfico se encuentra fuera de los límites en el contenedor2.
Intenté usar mxGraph.prototype.translateCell = function(cell,dx,dy) pero el nodo raíz no encaja en container2.