使用getBBox()获取文本区域

时间:2012-12-17 21:55:22

标签: d3.js

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();

如何使用getBBox()获取每个文本的文本区域?

2 个答案:

答案 0 :(得分:19)

这里最好的方法取决于你想要做什么。大多数d3回调函数都会将当前DOM元素作为this提供,因此这应该有效:

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

除此之外,问题是您需要使用该数字的上下文。例如,要获得文本宽度的总和,您可以执行以下操作:

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

答案 1 :(得分:9)

您也可以使用node():

在元素上同步执行此操作
console.log(text.node().getBBox());