javascript - 如果矩形低于特定高度，则删除文本 d3js v4

Question

如果文本的 y 位置超过特定值，我会尝试从条形图中删除文本值，并且我只想删除特定文本，而不是所有文本。

我遇到的问题是，直到页面完全加载后，才会评估 y 位置(或者看起来如此)，这是那段代码:

.text( function(d) { if(d3.select(this).attr("y") < 10) { "" }
    else { return d["Category" + catInt]; } 
    console.log("Not yet evaluated: " + d3.select(this).attr("y"))
})

在本例中它返回 12 个空值，但如果我将这些值记录在随后执行的函数中，我会得到所有位置，如下所示:

function getProp() {
    d3.selectAll(".textEnter").each(function(d) {
        console.log("Evaluated: " + d3.select(this).attr("y"))
    })
}

有谁知道更好的方法吗？

这是完整的代码:编辑:已修复 Plunker

Answer 1

或者您可以使用 transition.on('end') 回调并按以下方式添加文本:

textUpdate.transition()
    .duration(Globalvar.durations)
    .attr("y", function(d) { 
        return y(d["Category" + catInt]) + 15; 
    })
    .attr("x", function(d) { 
        return x(d.month) + x.bandwidth()/2; 
    }).on('end', function(d) { 
       if(d3.select(this).attr("y") < 10) { 
         d3.select(this).text("");
       } else { 
         d3.select(this).text(d["Category" + catInt]);
       } 
       console.log("Evaluated here: " + d3.select(this).attr("y"));
    });