принудительное расположение сохранить масштаб в сеансе: d3.event.scale - PullRequest
Новая
       31

принудительное расположение сохранить масштаб в сеансе: d3.event.scale

0 голосов
/ 22 октября 2018

У меня есть макет силы с поведением масштабирования.

var min_zoom = 0.3;
var max_zoom = 3;
var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom]);

Перед отправкой формы масштабирование (с помощью колесика мыши) и перевод работают нормально, как и ожидалось. 

svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" +  d3.event.scale + ")" );

С этой целью жизнь хороша.

Когда форма отправлена, текущие значения translate и scale сохраняются в сеансе.В качестве примера, скажем, что текущий scale равен 2.После отправки формы и повторной загрузки страницы сохраненный scale применяется, восстанавливая масштаб до его состояния перед отправкой.

Однако после этой загрузки страницы значение d3.event.scaleснова устанавливается в исходное значение (я думаю, это 1).Следовательно, попытка снова выполнить увеличение или уменьшение масштаба (используя колесо мыши) применяет масштабный коэффициент к начальному базовому значению увеличения (предположительно 1 для d3.event.scale) вместо использования значений, сохраненных из сеанса 2, и сделает внезапное, неожиданное изменение масштаба.

PS.Попытка вручную присвоить значение d3.event.scale не работает!Я думаю, что самым простым обходным решением будет изменение d3.event.scale в случае, если это возможно.В противном случае ручное управление масштабированием кажется исчерпывающим и не интуитивно понятным вариантом.

1 Ответ

0 голосов
/ 26 октября 2018

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

const previousScale = 2;

const min_scale = 0.3;
const max_scale = 3;

const width = 600;
const height = 200;

var zoom = d3.behavior.zoom()
  .scale(previousScale)
  .scaleExtent([min_scale, max_scale])
  .on('zoom', redraw)

const svg = d3.select('svg')

const g = svg
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', `scale(${previousScale}, ${previousScale})`)
  .call(zoom)

function draw() {
  g.append('circle')
    .attr('r', 50)
    .attr('cx', 50)
    .attr('cy', 50)

  const initialScale = zoom.scale();
  console.log(`initialScale: ${initialScale}`)
}
draw()

function redraw() {
  const newScale = zoom.scale();
  g.attr('transform', `scale(${newScale}, ${newScale})`)
  console.clear()
  console.log(`newScale: ${newScale.toFixed(2)}`)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>
...