getBoundingClientRect() возвращает одинаковые значения для всех элементов

Question

Я создаю легенду для своего графика. Мне нужно динамически выбирать значения x для разных элементов, основываясь на ширине предыдущего элемента. Я использую getBoundingClientRect() для этого. Проблема в том, что он возвращает одинаковые значения для всех различных элементов (значение первого элемента). Я записываю это на консоль.

var primaryTotal = legend.append('text')
    .attr("x", function () {
        console.log(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.log(d);
        // console.log(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()

Не знаю, как поступить. Любая помощь будет принята с благодарностью. Спасибо

Answer 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;

}

Если кто-нибудь может предложить более эффективное решение, пожалуйста, поделитесь... Спасибо