Масштабировать путь объекта после перевода

Question

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

var path = svg.append('path')
    .attr('d', function(d) {
        var x = 100, y = 100;
        return path;
    })
    .style("fill", "#1a5d18")
    .attr("transform", "translate(300,0)");

var path = path.attr("transform","scale(.3)");

Answer 1

Как вы уже знаете, установка нового transform переопределит предыдущий.

Давайте посмотрим на это в основной демонстрационной версии:

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform","scale(.3)");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
  <circle r="50"></circle>
</svg>

Как вы видите (на самом деле, вы не можете видеть!), Мы перемещаем круг в 100,50, но scale(0.3) возвращает круг в исходное положение.

Возможное решение - получить предыдущее значение transform.К сожалению, D3 v4 и v5 больше не имеют d3.transform, но его можно заменить, как объяснено в в этом ответе .

Однако в вашем конкретном случае , вы можете получить предыдущее значение translate, используя getAttribute непосредственно в элементе DOM и добавив scale.

Вот демонстрационная версия:

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform", function() {
  return this.getAttribute("transform") +
    " scale(0.3)";
});

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
  <circle r="50"></circle>
</svg>