D3 zoom translateExtent вычисление, когда цель меньше контейнера - PullRequest
Новая
       39

D3 zoom translateExtent вычисление, когда цель меньше контейнера

0 голосов
/ 30 апреля 2018

Для рабочего проекта у меня есть требование ограничить масштабируемый элемент SVG внутри контейнера. У меня есть уменьшенный пример проблемы здесь:

https://codesandbox.io/s/ryzp6x5lkn

В приведенных выше кодах и ящике у меня есть красный rect, содержащийся в g (container) в квадрате svg (node).

К container применен зум 'zoom'. При увеличении масштаба d3.event.transform применяется к rect.

Требуется, чтобы rect содержался в svg node во всех масштабах увеличения.

Для этого я применяю zoom.translateExtent и обновляю его при каждом преобразовании. 

const updateTranslateExtent = () => {

  const scale = container.property("__zoom").k;
  const containerBBox = container.node().getBBox();
  const containerTransform = container.node().getCTM();
  const containerTranslateX = containerTransform.e;
  const containerTranslateY = containerTransform.f;
  const viewportWidth = parseInt(node.attr("width"));
  const viewportHeight = parseInt(node.attr("height"));

  const extent = [
    [
      (viewportWidth - containerBBox.width - containerTranslateX) / scale * -1,
      (viewportHeight - containerBBox.height - containerTranslateY) / scale * -1
    ],
    [
      viewportWidth / scale + containerTranslateX * scale,
      viewportHeight / scale + containerTranslateY * scale
    ]
  ];

  zoom.translateExtent(extent);
};

Это работает в определенной степени, но не работает при применении шкалы.

Может ли кто-нибудь с любым опытом работы с зумом d3 помочь мне здесь?

Я пробовал интенсивное поиск в Google и пробную версию + ошибку при расчете экстента, но не смог заставить его работать на 100%.

Заранее спасибо!

1 Ответ

0 голосов
/ 02 мая 2018

После долгих проб и ошибок выясняется, что это был правильный расчет: 

const extent = [
  [
    (viewportWidth - containerBBox.width - containerTranslateX) / scale * -1,
    (viewportHeight - containerBBox.height - containerTranslateY) / scale * -1
  ],
  [
    viewportWidth / scale + containerTranslateX / scale,
    viewportHeight / scale + containerTranslateY / scale
  ]
];

Только немного по-другому, но прийти к такому выводу было очень больно!

Вот обновленная кодовая ручка: https://codesandbox.io/s/7m5v9n0jmq

...