Почему бы не перевести ($ {x}, $ {y}) и перевести ($ {- x}, $ {- y}) отменить? - PullRequest
Новая
       32

Почему бы не перевести ($ {x}, $ {y}) и перевести ($ {- x}, $ {- y}) отменить?

1 голос
/ 14 февраля 2020

Это фрагмент из https://observablehq.com/@d3 / не смежных картограмм , который управляет преобразованием формы состояний. 

function transform(d, year) {
  const [x, y] = path.centroid(d);
  return `
    translate(${x},${y})
    scale(${Math.sqrt(data.get(d.id)[year])})
    translate(${-x},${-y})
  `;
}

С x и y константы, не должны ли translate(${x},${y}) и translate(${-x},${-y}) аннулировать?

Далее, почему этот механизм защищает центроид в его старом положении?

1 Ответ

2 голосов
/ 15 февраля 2020

Важно понимать, что SVG-преобразования применяются последовательно, то есть порядок имеет значение. Вы не можете просто сложить числа, чтобы объединить список различных определений преобразования. В словах spe c:

Значение атрибута 'transform' является , который определяется как список определений преобразования, которые применяются в указанном порядке.

Каждое определение преобразования этого списка управляет системой координат, которая является основой для всех последующих преобразований. Хотя в вашем примере переводы номинально одинаковы в противоположных направлениях, они не отменяются, потому что масштабирование, которое происходит между ними, изменяет систему координат на этом пути. Таким образом, второй перевод не охватывает то же расстояние, что и первый.

Чтобы понять, почему эти преобразования удерживают центроид, полезно записать их более формально. Учитывая coodinates центроида (x c, y c) и коэффициент масштабирования k мы можем написать их как:

x ↦ x c + k ( x - x c)
y ↦ y c + k ( y - y c)

Каждый исходный пункт ( x, y) отображается на центроид (первые члены), а затем перемещается наружу в исходное положение, но перемещается только уменьшенная часть исходного расстояния (вторые члены).

Подключение Сам центроид в этих правилах показывает отмену второго слагаемого, который удерживает центроид в его первоначальном месте, посредством чего центрирует всю трансформацию на центроиде:

x c ↦ x c + k ( x c - x c) = x c
y c ↦ y c + k ( y c - y c) = y c

...