Следующий код игрушки (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.info(rec.attr("transform"))
Прежде всего, я считаю, что вы хотите получить в результате 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.info(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>
Гм,
20 * 5
?rec.attr("transform",rec.attr("transform")+" translate(" + (20 * 5) + ",0)");
?