Показать полный SVG с масштабированием

У меня есть диаграмма компоновки синтаксиса d3, мне нужно экспортировать ее в png с текущим (выбранным пользователем) масштабированием.

По моим рассуждениям это увеличит ширину и высоту SVG, поэтому, если SVG - 1920x1080 и он "увеличен", экспортируемый SVG должен, вероятно, иметь гораздо большую ширину и высоту для этого.

Я пробовал все, и мне что-то не хватает, я просто не могу динамически рассчитать правильные значения для требуемого результата.

Вот пример моего экспортированного SVG, обратите внимание, что есть намного больше информации, это просто не видно в этом масштабе.

EDIT

Вот мой основной код экспорта, в основном адаптированный из высоких карт:

    serializeSvg: function() {
        /**
         * serialize a xml object to string
         * @param {type} xmlNode the node to use
         * @returns {String|@exp;[email protected];xml|@exp;[email protected];[email protected];@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');

ОТВЕТЫ

Ответ 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: я на самом деле не сделал этого, но, предположительно, вы масштабируете атрибуты "высота" и "ширина" (я думаю, это будет просто путем умножения значений атрибутов на значение шкалы, но я не могу быть уверен).

Ответ 2

Примените окно просмотра и умножьте его на значение шкалы,

например, 1920x1080, когда unzoomed, затем viewbox = 0 0 1920 1080

в масштабе = 0,5 1920 * 0,5 1080 * 0,5 viewbox = 0 0 960 540

Ответ 3

Из ваших комментариев вы можете проверить некоторые из обсуждаемых здесь вариантов: https://groups.google.com/forum/#!msg/d3-js/tHRV4uvvHFU/yjIAfdQN8WsJ

D3 должен записывать атрибуты в DOM, общее ожидание заключается в том, что если вы экспортируете SVG as-is, вы должны получить точно такой же вид. Похоже на то, что вы хотите - это процесс визуализации существующего представления как png или аналогичного.

Здесь интересная клиентская сторона принимает http://html2canvas.hertzen.com/

Ответ 4

Я не тестировал это, но думаю, что когда вы экспортируете изображение, вам сначала нужно будет вернуться к исходному уровню. Затем сериализуйте XMLNode. Затем увеличьте размер, как вы делаете сейчас, в соответствии с уровнем масштабирования пользователя. И затем верните его.

Сначала вы можете получить пользовательские преобразования, используя:

zoom.scale()

Если не указано, возвращает текущий масштаб масштабирования, который по умолчанию равен 1.

zoom.translate()

Если не указано, возвращает текущий вектор перевода, который по умолчанию равен [0, 0].