title: d3 clock text upside down
body: <p><a href="https://i.stack.imgur.com/ekjzX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ekjzX.png" alt="enter image description here"></a></p>
  
  <p>How can I have all numbers from 13 - 11 not rotated? (I'd like all of them be displayed in current positions, but without rotating them - as here: <a href="http://bl.ocks.org/tomgp/6475678" rel="nofollow noreferrer">http://bl.ocks.org/tomgp/6475678</a>) </p>
  
  <p>This is my code right now: </p>
  
  <pre><code>var xTick = xAxis
          // .selectAll("g")
          .selectAll(".radial")
          .data(x.ticks(24))
          .enter().append("g")
          .attr("text-anchor", "middle")
          .attr("transform", function(d) {
            return "rotate(" + ((x(d)) * 180 / Math.PI - 90) + ")translate(" + innerRadius + ",0)";
          });
  
        xTick.append("line")
          .attr("x2", -5)
          .attr("stroke", "#595D5C");
  
        xTick.append("text")
        .attr("transform", function(d) {
          var angle = x(d.key);
          return ((angle &lt; Math.PI / 2) || (angle &gt; (Math.PI * 3 / 2))) ? "rotate(90)translate(0,0)" : "rotate(-90)translate(0, -15)"; })
            .text(function(d) {
            return d;
        })
        .style("font-size", 10)
        .attr("color", "#595D5C")
        .attr("opacity", 1)
  </code></pre>