Как указать начальный уровень масштабирования в D3?

Я написал script, чтобы графически отображать некоторые ориентированные на строку данные, с барами, метками и соединениями между строками. По мере роста набора данных полученный элемент SVG превысил размер экрана. Чтобы сохранить результат на одном экране (отчасти для упрощения управления размером d3 для пользователя), я масштабировал элемент SVG перед рисованием так, чтобы он соответствовал экрану. Я сделал это, добавив атрибут transform/scale в элемент SVG.

Проблема в том, что d3 behavior.zoom не знает об этом изменении масштаба, поэтому, когда я начинаю увеличивать масштаб, он сначала сбрасывает масштаб на 1. Есть ли способ изменить начальный масштаб в d3 behavior.zoom?

EDIT: добавлен рабочий процесс

Убито это путем умножения d3.event.scale на начальный масштаб в функции redraw(). Итак, начальная декларация элемента SVG

var SVG = d3.select('#timeline')
    .append('svg:svg')
        .attr('class','chart')
        .attr('transform','scale('+bscale+')')
        .attr('width', wwidth)
        .attr('height', wheight)
        .call(d3.behavior.zoom()
            .extent([[0,Infinity],[0,Infinity],[0,Infinity]])
            .on('zoom', redraw));

и

function redraw() {
    SVG.attr("transform",
        "translate(" + d3.event.translate + ")"
        + "scale(" + d3.event.scale * bscale + ")");
};

Ответы

Ответ 1

Начиная с D3 2.8.0, новый d3.behavior.zoom позволяет установить текущий масштаб, например

d3.behavior.zoom()
    .scale(currentScale);

Ответ 2

В d3 v4 вы можете использовать:

svg.call(zoom.transform, d3.zoomIdentity.scale(X_SCALE, Y_SCALE));

Простой пример:

var zoom = d3.zoom()
        .on("zoom", zoomed);

var zoomer = svg.append("rect")
        .call(zoom)
        .call(zoom.transform, d3.zoomIdentity.scale(2,2));

function zoomed() {
        svg.attr("transform", d3.event.transform);
    }

Надеюсь, что это поможет.

Ответ 3

После установки значения масштабирования вы должны вызвать событие масштабирования, чтобы изменения отображались на экране. Вот как вы это делаете:

//set the min and max extent to which zooming can occur and define a mouse zoom function
var zoom = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", zoomed);
zoom.translate([50,50]).scale(2);//translate and scale to whatever value you wish
zoom.event(yourSVGlayer.transition().duration(50));//does a zoom
//this function handles the zoom behaviour when you zoom with the mouse
function zoomed() { yourSVGlayer.attr("transform", "translate("+d3.event.translate+")scale(" + d3.event.scale + ")"); }