将平移位置设置为新的x、y位置

我已经在你的报告里解释过了 previous question 在d3v4/v5中,没有本地方法可以轻松地获取元素的转换值。但是,正如在那个问题中一样,我将使用中提供的函数 this answer 要获取这些值:

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 十 和 y 转型 到 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>