getBoundingClientRect() 为所有元素返回相同的值答案

【问题标题】：getBoundingClientRect() returns the same values for all elementsgetBoundingClientRect() 为所有元素返回相同的值
【发布时间】：2018-05-02 02:39:46
【问题描述】：

我正在为我的图表创建一个图例。我需要根据前一个元素的宽度为不同元素动态选择 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 的声明。它们都是我在传奇中使用的元素。

这是记录到控制台的内容......

console log showing the getBoundingClientRect() output

不知道如何继续。任何帮助将不胜感激。谢谢

【问题讨论】：

由于问题似乎是nameText 始终是同一个元素，如果您能展示它的声明以及预计如何更新它，将会有很大帮助。
@Kaiido 我将我的图例的每个元素附加到将数组作为数据集接收的“图例”元素。数组。 (rowObjectArray) 包含我想在图例中显示的数据。
我找到了一个临时修复方法...不过我认为它效率不高。我正在创建存储元素对象的数组，然后从中提取 getBoundingClientRect().right 值绘制完成后。

标签： d3.js getboundingclientrect

【解决方案1】：

我正在创建存储元素对象的数组，然后在绘制完成后从中提取 getBoundingClientRect().right 值。

 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;

}

如果有人可以提出更有效的解决方案，请分享...谢谢

【讨论】：