显示完整的 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

因此，在您的 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
}

这将为您提供 d3 的缩放和平移值：然后您需要对导出的 svg 应用适当的更改：我实际上并没有这样做，但大概是您缩放“高度”和“宽度”属性适当的（我认为这只是将属性值乘以比例值，但我不能确定）。

Answer 2

应用一个视图框并将其乘以比例值，

例如 1920x1080，未缩放时 viewbox=0 0 1920 1080

在比例 = 0.5 1920*0.5 1080*0.5 视图框 = 0 0 960 540

Answer 3

从您的 cmets 中，您可以查看此处讨论的一些选项：https://groups.google.com/forum/#!msg/d3-js/tHRV4uvvHFU/yjIAfdQN8WsJ

D3 应该将属性写入 DOM，一般的期望是，如果您按原样导出 SVG，您应该得到完全相同的视图。听起来您想要的是一个将现有视图呈现为 png 或类似视图的过程。

这是一个有趣的客户端只取http://html2canvas.hertzen.com/

Answer 4

我没有对此进行测试，但我认为当您导出到图像时，您首先需要缩小回起始级别。然后序列化 XMLNode。然后根据用户的缩放级别像现在一样增加大小。然后返回。

您最初应该能够使用以下方法获取用户的转换：

zoom.scale()

如果未指定，则返回当前缩放比例，默认为 1。

zoom.translate()

如果未指定，则返回当前平移向量，默认为 [0, 0]。