D3.js Установите начальный уровень масштабирования

У меня есть несколько графиков, предназначенных для увеличения масштаба контейнера, и он отлично работает. Однако при начальной загрузке уровень масштабирования слишком близко. Есть ли способ установки начального уровня масштабирования, чтобы избежать необходимости сначала уменьшать масштаб? Я знаком с методом .scale(), но не успел его реализовать. Это способ пойти или есть что-то, чего я не хватает?

Вот что я имею в виду для масштабирования:

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 50000 - margin.right - margin.left,
    height = 120000 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);

var tree = d3.layout.tree()
    .size([height, width])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x, d.y]; });

function zoom(d) {        
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"+ " scale(" + d3.event.scale + ")");
}

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("pointer-events", "all")
    .call(d3.behavior.zoom()
        .x(x)
        .y(y)
        .scaleExtent([0,8])
        .on("zoom", zoom))
        .append('g');

svg.append('rect')
    .attr('width', width*5)
    .attr('height', height)
    .attr('border-radius', '20')
    .attr('fill', 'sienna');

Ответ 1

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

var zoom = d3.behavior.zoom().translate([100,50]).scale(.5);

vis = svg.append("svg:svg")
     .attr("width", width)
     .attr("height", height)
     .call(zoom.on("zoom",zooming))
           .append("svg:g")
           .attr("transform","translate(100,50)scale(.5,.5)");

Ответ 2

Ответ D3v4

Если вы ищете то же самое, но с D3 v4,

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

vis = svg.append("svg:svg")
     .attr("width", width)
     .attr("height", height)
     .call(zoom) // here
     .call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(0.5))
     .append("svg:g")
     .attr("transform","translate(100,50) scale(.5,.5)");

Ответ 3

Добавление этого ответа в качестве дополнения к принятому ответу в случае, если у кого-то все еще есть проблемы:

То, что сделало это очень легким для понимания, выглядело здесь

При этом я устанавливаю три переменные:

масштаб, zoomWidth и zoomHeight

Шкала

- это начальная шкала, на которую вы хотите масштабировать, а затем

zoomWidth и zoomHeight определяются следующим образом:

zoomWidth = (width-scale*width)/2
zoomHeight = (height-scale*height)/2

где ширина и высота - это ширина и высота элемента "vis" svg

переводится выше, а затем изменяется следующим образом:

.attr("transform", "translate("+zoomWidth+","+zoomHeight+") scale("+scale+")")

а также функцию масштабирования:

d3.behavior.zoom().translate([zoomWidth,zoomHeight]).scale(scale)

Это эффективно гарантирует, что ваш элемент будет увеличен и центрирован при загрузке вашей визуализации.

Сообщите мне, если это вам поможет! Приветствия.

Ответ 4

Относится к d3.js v4

Это похоже на ответ davcs86, но он повторно использует начальное преобразование и реализует функцию масштабирования.

// Initial transform to apply
var transform = d3.zoomIdentity.translate(200, 0).scale(1);
var zoom = d3.zoom().on("zoom", handleZoom);

var svg = d3.select("body")
  .append('svg')
  .attr('width', 800)
  .attr('height', 300)
  .style("background", "red")
  .call(zoom)                       // Adds zoom functionality
  .call(zoom.transform, transform); // Calls/inits handleZoom

var zoomable = svg
  .append("g")
  .attr("class", "zoomable")
  .attr("transform", transform);    // Applies initial transform

var circles = zoomable.append('circle')
  .attr("id", "circles")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr('r', 20);

function handleZoom(){
  if (zoomable) {
    zoomable.attr("transform", d3.event.transform);
  }
};

Смотрите в действии: ссылка jsbin