d3.js - Getting text area using getBBox()

Question

var text = vis.selectAll("text")
    .data(words, function(d) { return d.text.toLowerCase(); });
    text.enter().append("text")
    .attr("text-anchor", "middle")
    .attr("transform", function(d) {
               return "translate(" + [d.x, d.y] + ")"})
    .style("font-size", function(d) { return d.size + "px"; })


    var bbox = text.node().getBBox();

How do I use getBBox() to get the text area of each text?

Answer 1

The best approach here depends on what you're trying to do. Most d3 callback functions will supply the current DOM element as this, so this should work:

text.each(function() {
    console.log(this.getBBox());
});

Beyond that, the question is the context in which you need to use that number. For example, to get the sum of the text widths, you could do:

var textWidth = 0;
text.each(function() {
    textWidth += this.getBBox().width;
});