Calcul du translateExtent du zoom D3 lorsque la cible est plus petite que le conteneur

Question

Dans le cadre d'un projet de travail, je dois contraindre un élément svg zoomable dans un conteneur. J'ai un exemple réduit du problème ici :

https://codesandbox.io/s/ryzp6x5lkn

Dans la boîte de codes ci-dessus, j'ai un code rouge. rect contenu dans un g ( container ) dans un carré svg ( node ) toile.

Le site container a un zoom ' zoom qui lui est appliqué. Lors d'un événement de zoom, le d3.event.transform est appliquée à la rect .

L'exigence porte sur le rect qui doit être contenu dans le svg node à toutes les échelles de zoom.

Pour ce faire, j'applique un zoom.translateExtent et le mettre à jour à chaque transformation.

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);
};

Cela fonctionne dans une certaine mesure, mais s'effondre lorsqu'un barème est appliqué.

Quelqu'un ayant de l'expérience avec le zoom d3 peut-il m'aider ici ?

J'ai beaucoup cherché sur Google et fait des essais et erreurs avec les calculs d'étendue, mais je n'ai pas réussi à les faire fonctionner à 100%.

Merci d'avance !

Answer 1

Il s'est avéré, après de nombreux essais et erreurs, que c'était le bon calcul :

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

C'est légèrement différent, mais j'ai eu beaucoup de mal à arriver à cette conclusion !

Voici un codepen mis à jour : https://codesandbox.io/s/7m5v9n0jmq