0

我正在为我的图表创建一个图例。我需要根据前一个元素的宽度为不同元素动态选择 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() 输出的控制台日志

不知道如何进行。任何帮助将不胜感激。谢谢

4

1 回答 1

0

我正在创建存储元素对象的数组，然后在绘制完成后从中提取 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;

}

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

于 2018-05-02T16:06:13.923 回答