Угловая таблица материалов - доступная проблема - невозможно получить доступ с помощью клавиатуры

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

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

const initialScale = 3;
const initialTranslate = [
  width * (1 - initialScale) / 2,
  height * (1 - initialScale) / 2,
];

const container = svg
  .append('g')
  .attr(
    'transform',
    `translate(${initialTranslate[0]}, ${initialTranslate[1]})scale(${initialScale})`
  );

Функция масштабирования будет выглядеть примерно так:

svg.call(
  zoom().on('zoom', () => {
    const transformation = getEvent().transform;
    let {x, y, k} = transformation;
    x += initialTranslate[0];
    y += initialTranslate[1];
    k *= initialScale;

    container.attr('transform', `translate(${x}, ${y})scale(${k})`);
  })
);

Если вы заметили getEvent() как функцию, это произошло потому, что импорт события из d3-selection не работал в моем случае. Поэтому мне пришлось делать

const getEvent = () => require('d3-selection').event;