d3.js条形图的Y轴标签显示为倒置

Question

我有一个d3.js条形图，大部分都没问题。我希望我的Y轴标签变得水平，因为文本非常大，所以我试图将它旋转180度，这使文本反转。

      svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-65)");     //works fine


svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-180)")    //rotated by 180 and text gets inverted
  .attr("y", 5)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("avg_facebook_usage_rank");

以下是fiddle