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

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

0 голосов
/ 02 мая 2018

Я создаю легенду для своего графика. Мне нужно динамически выбирать значения 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 ()

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

1 Ответ

0 голосов
/ 02 мая 2018

Я создаю массивы, в которых хранятся объекты элементов, а затем извлекаю из него правильное значение 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;

}

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

...