Actualmente estoy creando una pequeña aplicación para un amigo, que está comenzando su doctorado y necesita crear algunos gráficos de red. Hasta ahora todo funciona bien usando un gráfico dirigido por la fuerza. Los nodos de gráficos se pueden mover para dar estilo al diseño.

Lo que no puedo entender es:

»Cómo extraer los datos del lienzo y guardarlos en un archivo SVG«.

Lo que intenté:

Ya intenté acceder a los datos de la imagen desde la consola con

<code>var app.canvas = document.getElementById( 'graph-canvas' )
    .getContext( '2d' )
        .getImageData( 0, 0, 200, 200 );
</code>

y consiguió un(object) ImageData en cambio. Ahora puedo acceder a los ↑ datos de lienzo mostrados conapp.canvas.data. (Cuando intento también buscar los valores, el navegador comienza a colgarse y pregunta si se debe detener la secuencia de comandos - Chrome y FF más recientes).

¿Cómo iría desde aquí para dibujar el SVG y luego guardarlo con el clic de un botón?

EDITAR:

Hasta ahora descubrí cómo dibujar el SVG y agregar unimage/png elemento para ello. Sin embargo, no se muestra.

<code>// Add the test SVG el:
var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
svg.setAttribute( 'style', 'border: 1px solid black;' )
        .setAttribute( 'width', '600' )
        .setAttribute( 'height', '400' )
        .setAttributeNS(
            'http://www.w3.org/2000/xmlns/',
            'xmlns:xlink',
            'http://www.w3.org/1999/xlink'
        );

// Call
importCanvas( document.getElementById( 'infovis-canvas' ), svg ); 

// Function: Add data to SVG
function importCanvas( sourceCanvas, targetSVG ) 
{
    // get base64 encoded png data url from Canvas
    var img_dataurl = sourceCanvas.toDataURL( "image/png" );

    var svg_img = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "image"
    );

    svg_img.setAttributeNS(
        'http://www.w3.org/1999/xlink',
        'xlink:href',
        img_dataurl
    );
    jQuery( targetSVG.appendChild( svg_img ) )
        .appendTo( '#graph-container' );

    console.log( 'done' ); // Log & confirm
}
</code>

Y finalmente el ...

<code>// ...resulting SVG element containing the image element
<svg style="border: 1px solid black;" width="600" height="400" xlink="http://www.w3.org/1999/xlink"><image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAA(...)
</code>

La interfaz de usuario funciona con jQuery UI, jQuery yEl Jit / InfoVIZ biblioteca, por lo que están disponibles.