[Solved]-Place the labels on the axes correctly in D3.js-d3.js

You are over complicating how you set the axis labels. When rotating labels, labels are rotated from the coordinate system origin - not the text anchor. We can see this better if we compare the labels as is and if we remove the transform and just use the x,y attributes you specify:

.attr('x', 0)
.attr('y', function(d, i) {
    return i * cellSize;
})
//.attr('transform', function(d, i) {
//    return 'translate(-25, 11)';
//})

We can see all labels being rotated together around a common point. A hint that something might be awry in the label placement also comes from the code that dynamically sets a y value and a fixed x value for to place values that differ only in x values.

We can simplify this, instead of setting x, y, and transform, let's just set transform. First we'll modify the coordinate system so that the origin of each labels coordinate system is where it is anchored. Then we'll rotate:

.attr('transform', function(d, i) {
    return 'translate('+(i*cellSize)+',2) rotate(-65)';
})

We'll also want to update the update function:

t.selectAll('.colLabel')
  .attr('transform', function(d, i) {
    return 'translate('+(sorted.indexOf(i)*cellSize)+',2) rotate(-65)';
  })

Giving us:

The other issue, the spacing of the y axis labels, you are updating the x position of the labels when you sort. This is un-necessary, the labels only need to move vertically, we can remove the transform change and just use:

t.selectAll('.rowLabel')
  .attr('y', function(d, i) {
     return sorted.indexOf(i) * cellSize;
   })

Here's an updated plunkr.