GetBoundingClientRect () возвращает одинаковые значения для всех элементов
Я создаю легенду для своей диаграммы. Мне нужно динамически выбирать значения x для разных элементов в зависимости от ширины предыдущего элемента. Для этого я использую getBoundingClientRect (). Проблема в том, что он возвращает одинаковые значения для всех различных элементов (значение первого элемента). Записываю в консоль.
var primaryTotal = legend.append('text')
.attr("x", function () {
console.info(nameText.node().getBoundingClientRect());
return ((nameText.node().getBoundingClientRect().right)+100);
})
.attr("y", 0)
.text(function (d) {
return d["total"] + " " + parameter[DS1].units_scaled;
})
.style("fill", function (d) {
return d["colour"];
})
nameText - это элемент, который я рисую перед primaryTotal.
var legend = groups.selectAll('.legend')
.data(rowObjectArray)
.enter()
.append('g')
.attr("transform", function (d, i) {
// console.info(d);
// console.info(i);
return "translate(0," + ((i * 20) + 20) + ")";
})
Я добавляю его в созданную здесь группу.
var legendRect = legend.append('rect')
.attr("x", 0)
.attr("y", -10)
.attr("width", 10)
.attr("height", 10)
.style("fill", function (d, i) {
return d["colour"];
})
var nameText = legend.append('text')
.attr("x", function () {
return (legendRect.node().getBoundingClientRect().right);
})
.attr("y", 0)
.text(function (d) {
return d["name"];
})
.style("fill", function (d) {
return d["colour"];
})
объявление nameText и legendRect. Оба эти элемента я использую в своей легенде.
Это то, что записывается на консоль ....
журнал консоли, показывающий вывод getBoundingClientRect ()
Не знаю, что делать дальше. Любая помощь будет принята с благодарностью. Спасибо
@Kaiido Я добавляю каждый элемент моей легенды к элементу «legend», который принимает массив как набор данных. Массив. (rowObjectArray) содержит данные, которые я хочу отобразить в легенде.
Я нашел временное исправление для этого ... Я не думаю, что это эффективно ... Я создаю массивы, в которых хранятся объекты элементов, а затем извлекаю из него правильное значение getBoundingClientRect ()., Как только оно будет построено.
Ответы 1
Я создаю массивы, в которых хранятся объекты элементов, а затем извлекаю из него правильное значение getBoundingClientRect ()., Как только оно будет построено.
var nameTextCoordArray = [];
var nameTextArray = [];
count = 0;
var nameText = legend.append('text')
.attr("x", function (d, i) {
return (rectCoordArray[i]);
})
.attr("y", 0)
.text(function (d) {
nameTextArray[count] = this;
count = (count + 1);
return d["name"];
})
.style("fill", function (d) {
return d["colour"];
})
nameTextCoordArray = getCoordArray(nameTextArray);
var primaryTotal = legend.append('text')
.attr("x", function (d, i) {
return d3.max(nameTextCoordArray);
})
.attr("y", 0)
.text(function (d) {
primaryTotalArray[count] = this;
count = (count + 1);
return d["total"] + " " + parameter[DS1].units_scaled;
})
.style("fill", function (d) {
return d["colour"];
})
Метод getCoordArray:
var getCoordArray = function (array) {
var returnArray = [];
for (x in array) {
returnArray[x] = (array[x].getBoundingClientRect().right + 20);
}
return returnArray;
}
Если кто-нибудь может предложить более эффективное решение, поделитесь, пожалуйста ... Спасибо
Поскольку проблема, похоже, в том, что
nameTextвсегда один и тот же элемент, было бы очень полезно, если бы вы могли показать его объявление и то, как он, как ожидается, будет обновляться.