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属性中添加转换参数为其先前的值，同时将transform属性设置为null）

Answer 1

正如我在您的previous question中已经解释的那样，D3 v4 / 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），设置新的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>

如果检查矩形，您会看到类似tis的东西：

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

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

1 个答案: