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

Я создал силовой макет d3.js и хочу установить начальный уровень масштабирования в зависимости от разрешения экрана. Я реализовал его при загрузке страницы с помощью jQuery со статическим значением scale, и он отлично работает, но когда я увеличиваю масштаб, он масштабируется непосредственно до масштаба по умолчанию.

Вот код:

var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().scaleExtent([0.2, 3]).on("zoom", redraw)).on("dblclick.zoom", null)
.append('svg:g');

$( document ).ready(function() {
  scale = (0.24758571798325626);
  translate = [width*40/100,height*37/100];      
  svg.transition()
    .duration(750)
    .attr("transform", "translate(" + translate + ")scale(" + scale +    ")");
});

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


jquery d3.js force-layout
person vishB    schedule 15.04.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

var zoomBehavior = d3.behavior.zoom()
  .scaleExtent([0.2, 3])
  .on("zoom", redraw);

var svg = d3.select("#grapharea")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoomBehavior)
.append('svg:g');

$( document ).ready(function() {
  scale = (0.24758571798325626);
  translate = [width*40/100,height*37/100];      
  svg.transition()
    .duration(750)
    .attr("transform", "translate(" + translate + ")scale(" + scale +    ")")
    .each("end", function () {
      zoomBehavior
        .scale(scale)
        .translate(translate);
    });
});
person Mauricio Poppe    schedule 15.04.2015
comment
Спасибо! это сработало для меня после некоторой модификации кода - person vishB; 15.04.2015