巩固D3连续的翻译(consolidate successive translations in D

下面的代码玩具（ 的jsfiddle这里 ）写入控制台日志translate(20,0) translate(20,0) translate(20,0) translate(20,0) translate(20,0) 是否有可能得到translate(100,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++) {
   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> 

文章来源: consolidate successive translations in D3