d3 this.getBBox().x not working

d3 this.getBBox().x not working

本文关键字：not working this getBBox d3      更新时间：2023-09-26

我正在尝试反转代码中的一些文本。这意味着，如果文本的位置+宽度超过720（我的域），我想把它放在我的栏里——一些填充。它在开始时是有效的，但随后"this.getBBox（）.x"就失控了。

    enterTransition.select(".barLabels")
        .each(function() {
        if ( this.getBBox().x + this.getBBox().width >  720 - elemPadding ) {
            console.log(this.getBBox());
            console.log('Will reverse');
            d3.select(this).attr("dx", -this.getBBox().width-elemPadding*2)
            .attr("fill", "white");
        }
        });

（顺便说一句，我是用层次图来做这件事的）。

在的层次结构中向上或向下移动之前的图片.getBBox（）

回到同一层后的相同this.getBBox（）的图片

如果我正确理解你的问题，你希望标签位置在图上向左而不是向右。要做到这一点，您需要将以下内容更改为do width-this.getBBox（）.width elemPadding*2。我假设720是你的绘图区域宽度。。。

enterTransition.select(".barLabels")
    .each(function() {
    if ( this.getBBox().x + this.getBBox().width >  720 - elemPadding ) {
        console.log(this.getBBox());
        console.log('Will reverse');
        d3.select(this).attr("dx", 720 -this.getBBox().width-elemPadding*2)
        .attr("fill", "white");
    }
    });

希望这能有所帮助！

以下是它的内容。this.getBBox（）.x给了我错误的结果，所以我使用了x（d.value）。

    enterTransition.select(".barLabels")
        .each(function(d){
            var xPos = x(d.value);
            if ( xPos + this.getBBox().width > height - elemPadding ) {
                d3.select(this).attr("dx", - this.getBBox().width - elemPadding*2)
                .attr("fill", "white");
            }
        })
相关文章：