Zeigen Sie voll SVG mit Skalierung intakt

Question

Ich habe ein d3 generiert Kraftlayout-Diagramm, ich muss es zu png mit der aktuellen (benutzerdefinierten) Skalierung intakt exportieren.

Durch meine Argumentation dies wird dann wachsen die SVG Breite und Höhe, so dass, wenn die svg1920x1080 ist, und es ist ‚gezoomt‘ in die exportierte svg wahrscheinlich eine viel größere Breite und Höhe zur Aufnahme dieser haben sollte.

Ich habe alles versucht, und mir fehlt etwas, ich kann einfach nicht scheinen, dynamisch die korrekten Werte für den Ausgang zu berechnen, den ich benötige.

Hier ist ein example meiner exportierten SVG, beachten Sie, dass es viel mehr Informationen, es ist einfach nicht sichtbar in dieser Größenordnung.

EDIT

Hier ist mein Grund ausführenden Code, vor allem aus highcharts angepasst:

serializeSvg: function() { 
     /** 
     * serialize a xml object to string 
     * @param {type} xmlNode the node to use 
     * @returns {String|@exp;xmlNode@pro;xml|@exp;window@pro;XMLSerializer@call;@call;serializeToString} 
     */ 
     function serializeXmlNode(xmlNode) { 
      if (typeof window.XMLSerializer !== 'undefined') { 
       return (new window.XMLSerializer()).serializeToString(xmlNode); 
      } else if (typeof xmlNode.xml !== 'undefined') { 
       return xmlNode.xml; 
      } 

      return ''; 
     } 

     var svg = serializeXmlNode(document.getElementsByTagName('svg')[0]), 
      factor = 2; 
     svg = '<svg' 
       + ' xmlns="http://www.w3.org/2000/svg"' // xml namespace 
       + ' version="1.1"' 
       + ' xmlns:xlink="http://www.w3.org/1999/xlink"' // for images 
       + ' ' + svg.substring(svg.indexOf('<svg ') + 5); 

     // highcharts svg sanitizer 
     svg = svg.replace(/width="([^"]+)"/, function(m, width) { 
       return 'width="' + (width * factor) + '"'; 
      }).replace(/height="([^"]+)"/, function(m, height) { 
       return 'height="' + (height * factor) + '"'; 
      }).replace(/<rect class="drag"[^<]+<\/rect>/, '') 

      // IE specific 
      .replace(/<IMG /g, '<image ') 
      .replace(/height=([^" ]+)/g, 'height="$1"') 
      .replace(/width=([^" ]+)/g, 'width="$1"') 
      .replace(/id=([^" >]+)/g, 'id="$1"') 
      .replace(/class=([^" ]+)/g, 'class="$1"') 
      .replace(/ transform /g, ' ') 
      .replace(/:(path|rect)/g, '$1') 
      .replace(/style="([^"]+)"/g, function(s) { 
        return s.toLowerCase(); 
      }); 

     return svg; 
    } 

und der Haupt Zoom/Skalierung Start für das d3 Layout:

var layout = d3.layout.force(); 
var DEFAULT_SIZE = 64; 
var GROWTH_SCALE = 1.15; 
var SHRINK_SCALE = 1.05; 

// creates a new force layout 
var force = layout 
    .size([w, h]) 
    .gravity(.06) 
    .distance(110) 
    //.friction(0.6) 
    //.linkStrength(0.4) 
    .charge(-((DEFAULT_SIZE * GROWTH_SCALE) * 10)) 
    .on('tick', tick); 

// creates the svg context 
var svg = d3.select('.la-container').append('svg:svg') 
    .attr('width', w) 
    .attr('height', h) 
    .attr('pointer-events', 'all') // set for the pan/zooming 
    .append('svg:g') // add a g element for capturing zoom and pan 
     .call(d3.behavior.zoom().scaleExtent([0.6, 6.0]).on('zoom', redraw)) 
    .append('svg:g'); 

svg.append('svg:rect') 
    .attr('class', 'drag') 
    .attr('width', w) 
    .attr('height', h) 
    .attr('fill', 'white'); 

Answer 1

Aus Ihre Kommentare, können Sie einige der hier besprochenen Optionen überprüfen: https://groups.google.com/forum/#!msg/d3-js/tHRV4uvvHFU/yjIAfdQN8WsJ

D3 sollte Attribute in das DOM schreiben, die allgemeine Erwartung ist, dass wenn Sie das SVG unverändert exportieren, sollten Sie genau die gleiche Ansicht erhalten. Es klingt wie das, was Sie möchten, ist ein Prozess, um die vorhandene Ansicht als PNG oder ähnliches zu rendern.

Hier ist eine interessante clientseitige nimmt nur http://html2canvas.hertzen.com/

Answer 2

ich habe dies getestet, aber ich denke, wenn Sie Bild exportieren würden Sie zuerst wieder auf das Ausgangsniveau heran müssen aus. Dann serialisieren Sie den XMLNode. Erhöhen Sie dann die Größe, wie Sie es jetzt tun, entsprechend der Skalierungsstufe des Benutzers. Und dann gib es zurück.

Sie sollten in der Lage sein, die Transformationen des Benutzers zu erhalten zunächst mit:

zoom.scale()

Wenn nicht angegeben, gibt den aktuellen Zoomfaktor, der standardmäßig auf 1.

zoom.translate()

Wenn nicht angegeben, wird der aktuelle Übersetzungsvektor mit der Standardeinstellung [0, 0] zurückgegeben.

Answer 3

Also, in Ihrem d3-Startup-Code rufen Sie d3.behaviour.zoom.on() an, um die "Neuzeichnen" -Funktion an die "Zoom" -Aktion zu binden.Um den Maßstab und Übersetzungsstufe zu erhalten, sollten Sie die d3.scale und d3.translate Werte in dieser Funktion, so etwas erfassen (wie Sie nicht den Code für die Neuzeichnung Funktion gebucht haben):

var scale = 1; 
var xtranslate=0; 
var ytranslate=0; 

var redraw = function(){ 
    scale= d3.event.scale; 
    xtranslate=d3.event.translate[0]; 
    ytranslate=d3.event.translate[1]; 

    //your actual code to redraw stufff 
} 

Das wird Sie erhalten die Skalierungs- und Übersetzungswerte von d3: dann müssen Sie die entsprechenden Änderungen an der exportierten SVG anwenden: Ich habe das nicht wirklich getan, aber vermutlich skalieren Sie die Attribute "Höhe" und "Breite" entsprechend (ich denke, das wäre es) nur durch Multiplizieren der Attributwerte mit dem Skalenwert, aber ich kann nicht sicher sein).

Answer 4

einen Blick Feld Übernehmen und multiplizieren sie mit Skalenwert,

zum Beispiel 1920x1080, wenn ungezoomten dann Sichtbox = 0 0 1920 1080

bei scale = 0,5 1920 * 0,5 1080 * 0,5 Sichtbox = 0 0 960 540