合并 D3 中的连续翻译

Question

以下玩具代码 (jsfiddle here) 写入控制台日志 translate(20,0) translate(20,0) translate(20,0) translate(20,0) translate(20,0)。是否可以将 translate(100,0) 作为 "consolidated" 翻译？

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

var rec=svg.append("rect")
    .attr("width",20)
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", 20)
    .attr("fill","#00ffff")
    .attr("transform","")
    ;
   for (var i=0;i<10;i++) {
   rec
   .attr("transform",rec.attr("transform")+" translate(20,0)")
   ;
   }
   console.log(rec.attr("transform"))

Answer 1

首先，我相信你想要得到 translate(200,0) 作为结果，而不是 translate(100,0)，因为有 10 个循环。

也就是说，您必须获取翻译值并将 20 添加到第一个，将 0 添加到第二个。否则，您将只是连接字符串，就像您现在所做的那样。

不幸的是，D3 v4/v5 中没有本地方法来获取转换值，因此我将使用中提供的函数，稍作修改（if条件），因为你的第一个值是一个空字符串（""）：

function getTranslation(transform) {
  if (transform === "") {
    return [0, 0]
  };
  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];
}

因此，您只需获取当前翻译并在 for 循环中添加您想要的值即可：

for (var i = 0; i < 10; i++) {
  var currentTransform = getTranslation(rec.attr("transform"));
  rec.attr("transform", "translate(" + (currentTransform[0] + 20) + ",0)");
}

这是演示：

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

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

for (var i = 0; i < 10; i++) {
  var currentTransform = getTranslation(rec.attr("transform"));
  rec.attr("transform", "translate(" + (currentTransform[0] + 20) + ",0)");
}

console.log(rec.attr("transform"))

function getTranslation(transform) {
  if (transform === "") {
    return [0, 0]
  };
  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>

合并 D3 中的连续翻译

consolidate successive translations in D3

iteration

svg

translation

d3.js