顯示完整的SVG與縮放完好

Question

我有一個d3生成的力佈局圖，我需要導出到png與當前（用戶選擇）縮放完好。

通過我的推理，這將隨後增長SVG的寬度和高度，所以如果svg是1920x1080，它是在「放大」，導出svg大概應該有一個更大的寬度和高度，以適應這一點。

我已經試過了一切，我錯過了一些東西，我似乎無法動態地計算出我需要的輸出的正確值。

這裏是我的出口SVG的example，請注意，有很多的更多信息，它是在這個規模剛好不可見。

編輯

這裏是我的基本導出代碼，大多是從highcharts改編：

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; 
    } 

和D3的佈局主要變焦/縮放啓動：

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

從你的意見，你可以看看這裏討論的一些選項：https://groups.google.com/forum/#!msg/d3-js/tHRV4uvvHFU/yjIAfdQN8WsJ

D3應該將屬性寫入DOM，一般的期望是，如果您按原樣導出SVG，則應該獲得完全相同的視圖。這聽起來像你想要的是一個將現有視圖呈現爲PNG或類似視圖的過程。

這裏有一個有趣的客戶端只需要http://html2canvas.hertzen.com/

Answer 2

我還沒有測試這一點，但我認爲當你導出爲圖片，你首先需要縮小回到起始水平。然後序列化XMLNode。然後根據用戶的縮放級別像現在這樣增加大小。然後歸還它。

你應該能夠得到用戶的轉換最初使用：

zoom.scale（）

如果沒有指定，返回當前的縮放比例，默認爲1

zoom.translate（）

如果未指定，則返回當前平移向量，默認爲[0，0]。

Answer 3

因此，在您的d3啓動代碼中，您可以調用d3.behaviour.zoom.on()將「重繪」功能綁定到「縮放」操作。爲了獲得規模和翻譯水平，要抓住這個函數的d3.scale和d3.translate值，這樣的事情（因爲你還沒有發佈的代碼爲重繪功能）：

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 
} 

，將讓你那麼你需要對導出的svg應用適當的修改：我實際上並沒有這樣做，但是可以推測，你適當地調整了「height」和「width」屬性（我認爲這應該是隻是將屬性值乘以比例值，但我無法確定）。

Answer 4

應用的圖框，並通過比例值乘以，

例如1920×1080，則未縮放視框= 0 0 1920 1080

在標度= 0.5 1920 * 0.5 1080 * 0.5 視框時= 0 0 960 540