“Первый” функциональный язык пациента амнезии? (Мне действительно нравится Clojure …),

Есть несколько вещей:

Первый

d3.event.translate не содержит значения x и y преобразования, используйте d3.event.transform, чтобы получить эти значения. Объект преобразования имеет свойства x, y и k.

Секунда

Если вы используете .style() для размещения преобразования, вам нужно указать, что единица измерения - это пиксели для смещения:

var t = d3.event.transform;
d3.select("zoomedElement")
  .style('transform', 'translate('+t.x+"px,"+t.y + 'px)scale(' + t.k + ')');

Альтернативно , вы можете использовать .attr() без px:

var t = d3.event.transform;
d3.select("zoomedElement")
  .style('transform', 'translate('+[t.x,t.y]+')scale(' + t.k + ')');

Давайте посмотрим на ваш плункер с этими изменениями (и без степени перевода):

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .on('zoom', zoomFn);

  d3.select('svg')
  .select('g')
  .style("transform-origin", "50% 50% 0");

function zoomFn() {
   var t = d3.event.transform;
  d3.select('svg').select('g')
    .style('transform', 'translate('+t.x+"px,"+t.y + 'px)scale(' + t.k + ')');


}

d3.select('svg')
  .select('rect')
  .call(zoom);

    .zoom-layer {
      fill: #EEE;
      fill-opacity: 0.25;
    }

Вы, вероятно, хотите сделать выделение, не включающее прямоугольник, - оно должно остаться таким же, чтобы вся поверхность SVG оставалась интерактивной [ 1121]

Третий

Выглядит так, как будто вы хотите перевести экстент, иногда это немного сложно установить. Этот ответ углубляется в степень увеличения / степени масштабирования, но я расскажу, как ограничить ваш круг на экране:

С переводом [0,0] ваш круг сидит в середине SVG. Если мы переведем [-150, -150], ваш круг будет в верхнем левом углу svg. Если круг центрируется на cx = 150 cy = 150, то верхний левый угол видимой области теперь равен [150,150]. Следовательно, справа внизу - [450,450]. Видимый размер: [[150,150],[450,450]].

С переводом [150,150] ваш круг находится в правом нижнем углу SVG. Поскольку круг все еще находится в [150,150], нижний правый угол находится в [150,150] (не помогает ясности, что перевод и положение круга имеют одинаковое значение здесь) . Верхний левый угол находится на [-150,-150]. Тогда видимый размер должен быть: [[-150,-150],[150,150]].

Мы берем крайности из пределов видимого экстента, так как это экстент перевода, который держит круг в поле зрения:

var translateExtent = [[-150,-150],[450,450]]

Естественно, если у вас были вещи во всех углах, а не в середине Вы бы имели большую степень.

И мы можем применить все к фрагменту:

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .translateExtent([[-150,-150],[450, 450]])
  .on('zoom', zoomFn);

  d3.select('svg')
  .select('g')
  .style("transform-origin", "50% 50% 0");

function zoomFn() {
   var t = d3.event.transform;
  d3.select('svg').select('g')
    .style('transform', 'translate('+t.x+"px,"+t.y + 'px)scale(' + t.k + ')');

  console.log(t.x,t.y)

}

d3.select('svg')
  .select('rect')
  .call(zoom);

    
    .zoom-layer {
      fill: #aaa;
      fill-opacity: 0.25;
    }