D3 append element to end of text
Solution 1:
You could use getBBox
to determine the width of each text block after plotting, but the simpler solution would be changing the anchoring:
tile.append("text")
.data(data)
.attr('class', 'labelx')
.attr("text-anchor", "end") // position the end of the text here
.attr("x", width / 2.5)
.attr("y", 150)
.text(function(d) {
return formatComma(d.Value)
})
//add % variance
tile.append("text")
.data(data)
.attr('class', 'var')
.attr("text-anchor", "start") // position the start of the var at the same spot
.attr("x", width / 2.5)
.attr("y", 130)
.text( function(d) {
return formatPC(d.Var) })