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) })