d3js not formatting text value

Question

I am trying to format the values that are showing up on the chart, but for somereason, it is not updating.

Here is the link that I am working with:

https://plnkr.co/edit/naP7XXkNcaxSJRmpTQv5?p=preview

In the box2.js file line 206 is where the values for the box are showing up.

  var boxTick = g.selectAll("text.box")
      .data(quartileData);
 if(showLabels == true) {
  boxTick.enter().append("text")
      .attr("class", "box")
      .attr("dy", ".3em")
      .attr("dx", function(d, i) { return i & 1 ? 6 : -6 })
      .attr("x", function(d, i) { return i & 1 ?  + width : 0 })
      .attr("y", x0)
      .attr("text-anchor", function(d, i) { return i & 1 ? "start" : "end"; })
      .text(format)
    .transition()
      .duration(duration)
      .attr("y", x1);
}

I have tried changing the .text() to different things but it always gives the same result.

Answer 1

Ok, so the error was that I was not replacing all the locations where .text() was set.

The .transition() had to be updated also. The same thing applies for the whiskers code.

  boxTick.transition()
      .duration(duration)
      .text(format)
      .attr("y", x1);