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的声明。它们都是我在传奇中使用的元素。

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

console log showing the getBoundingClientRect() output

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

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

}

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

getBoundingClientRect（）为所有元素返回相同的值

1 个答案: