index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Text bbox issue</title>
</head>
<style type="text/css" media="screen">
@import url(//fonts.googleapis.com/css?family=Cutive);
svg text {
font-family: 'Cutive',Helvetica, sans-serif;
font-size: 30px;
}
#invisible {
font-family: 'Cutive',Helvetica, sans-serif;
visibility: hidden;
}
</style>
<body>
<div id="invisible">now you see me...</div>
<div id="content"></div>
</body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var txts;
function transformCoordOf(elem) {
var separator = elem.attr("transform").indexOf(",") > -1 ? "," : " ";
var trans = elem.attr("transform").split(separator);
return { x: (trans[0] ? parseFloat(trans[0].split("(")[1]) : 0), y: (trans[1] ? parseFloat(trans[1].split(")")[0] ): 0) };
}
function positionElements() {
txts.filter(function(d,i){return i != 0})
.attr("transform",function(d,i){
var prev = d3.select(txts[0][i]),
prevWidth = parseFloat(prev.node().getBoundingClientRect().width)
prevCoords = transformCoordOf(prev);
var cur = d3.select(this),
curWidth = parseFloat(cur.node().getBoundingClientRect().width)
curCoords = transformCoordOf(cur);
var y = prevCoords.y,
x = prevCoords.x + prevWidth + 10;
return "translate("+x+","+y+")";
})
d3.select('#invisible').remove();
}
function init() {
var names = ["apples","oranges","bananas"]
var canvas = d3.select("#content")
.append("svg")
.attr("width","600px")
.attr("height","100px");
txts = canvas.selectAll("text").data(names)
.enter()
.append("text")
.attr("transform","translate(10,50)")
.text(function(d){return d});
positionElements();
}
init();
</script>
</html>