以下玩具代码(jsfiddle here)写入控制台日志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"))
首先,我相信你想得到translate(200,0)
作为结果,而不是translate(100,0)
,因为有10个循环。
话虽这么说,你必须得到翻译值并将20
添加到第一个,0
添加到第二个。否则你将只是连接字符串,就像你现在正在做的那样。
遗憾的是,D3 v4 / v5中没有原生方法来获取变换值,因此我将使用this answer中提供的函数,稍加修改(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>