javascript - d3 this.getBBox().x 不工作

Question

我正在尝试反转代码中的某些文本。这意味着如果文本的位置+宽度大于 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");
        }
        });

(顺便说一句，我正在分层图表中执行此操作)。

在层次结构中向上或向下移动之前 this.getBBox() 的图片 here

回到同一层后相同的 this.getBBox() 的图片 here

Answer 1

如果我正确理解你的问题，你希望标签位置位于图的左侧而不是右侧。为此，您需要更改以下内容来执行宽度 - 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");
    }
    });

希望这有帮助!