title: How to transform (rotate) svg text element without changing coordinates?
body: <p>I'm new to this d3.js. Here I'm trying to draw a bar chart using the d3.v3.js library. Here I'm facing few problems. I have tried to include measure labels onto the y-axis. But once I transform the labels -90 degree its position is automatically changing. </p>
  
  <p>Here's the code I'm used to drawing:</p>
  
  <pre><code>    svg.append("g")
      .attr("id","x_axis")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")  
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", ".15em")
      .attr("transform", "rotate(-65)");
      // .attr("transform", "translate(" + bandSize + ", 0)")
  
      svg.append("g")
      .attr("class", "x axis")
      .attr("id","dimLabel")
      .append("text")
      .style("text-anchor", "end")
      .attr("x", width/2)
      .attr("y", height+55) 
      .text(dimensionLabels[0]);
  
  
  
  
      svg.append("g")
      .attr("id","y_axis1")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("class", "label")
      //.attr("transform", "rotate(-90)")
      .attr("y", function(d){return y(d3.max(data, function(d) { return d.Metric1; }));});
  
  
      //Measure Labels
      svg.append("g")
      .attr("class", "y axis")
      .attr("id","measureLabels")
      .append("text")
      .style("text-anchor", "end")
      .attr("x", 0)
      .attr("y", height/2) 
      .text(measureLabels[0]+", "+measureLabels[1])
      .attr("transform", "rotate(-90)");
  </code></pre>
  
  <p>Output Image:</p>
  
  <p><img src="https://i.stack.imgur.com/HM2X9.jpg" alt="enter image description here"></p>
  
  <p>Any help is greatly appreciated.</p>