Установить переведенную позицию как новую позицию x, y

Question

var rec=svg.append("rect")
    .attr("width",30)
    .attr("height", 30)
    .attr("x", 10)
    .attr("y", 20)
    .attr("fill","#00ffff");

rec.attr("transform"," translate(50,10)");

Существует ли какой-либо автоматический способ установить преобразованную позицию (60,30) в качестве новой нетрансформированной позиции? (то есть, чтобы добавить к атрибутам x и y параметры translate их прежние значения и одновременно установить атрибут transform в значение null)

Answer 1

Как я уже объяснил в вашем предыдущем вопросе , в D3 v4 / v5 нет собственного метода, позволяющего легко получить значения перевода элемента. Однако, как и в этом вопросе, я буду использовать функцию, предоставленную в этом ответе , чтобы получить эти значения:

function getTranslation(transform) {
  var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
  g.setAttributeNS(null, "transform", transform);
  var matrix = g.transform.baseVal.consolidate().matrix;
  return [matrix.e, matrix.f];
}

Имея это в виду, нужно просто получить все значения (x, y, transform), установить новые значения x и y и transform на null , Это может быть такая функция:

function setTranslated(element) {
  var currentTranslation = getTranslation(element.attr("transform"));
  element.attr("x", +element.attr("x") + currentTranslation[0]);
  element.attr("y", +element.attr("y") + currentTranslation[1]);
  element.attr("transform", null)
}

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

var svg = d3.select('svg');

var rec = svg.append("rect")
  .attr("width", 30)
  .attr("height", 30)
  .attr("x", 10)
  .attr("y", 20)
  .attr("fill", "#00ffff");

rec.attr("transform", "translate(50,10)");

setTranslated(rec)

function setTranslated(element) {
  var currentTranslation = getTranslation(element.attr("transform"));
  element.attr("x", +element.attr("x") + currentTranslation[0]);
  element.attr("y", +element.attr("y") + currentTranslation[1]);
  element.attr("transform", null)
}

function getTranslation(transform) {
  var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
  g.setAttributeNS(null, "transform", transform);
  var matrix = g.transform.baseVal.consolidate().matrix;
  return [matrix.e, matrix.f];
}

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

Если вы осмотрите прямоугольник, то увидите что-то вроде этого:

<rect width="30" height="30" x="60" y="30" fill="#00ffff"></rect>