title: How can I change the sort order of a D3 ordinal scale?
body: <p>I have been working with Mike Bostock's <a href="http://bl.ocks.org/mbostock/3885705" rel="nofollow">Sortable Bar Chart</a>, which nicely staggers the sorting of an ordinal axis.</p>
  
  <p>The initial sort is done from the left (starting A, B, C…) , but the reverse is done with the same order (A, B, C…) rather than from the left. This means that the letters start moving from seemingly random positions and the eye can't follow it as easily as the first sort.</p>
  
  <p>I have been trying to resolve this, but I suspect that this may be a limitation of ordinal scales: the sort order is that specified in setting the domain. The sorting element of the code is at the bottom.</p>
  
  <pre><code>var x0 = x.domain(data.sort(this.checked
      ? function(a, b) { return b.frequency - a.frequency; }
      : function(a, b) { return d3.ascending(a.letter, b.letter); })
      .map(function(d) { return d.letter; }))
      .copy();
  
  var transition = svg.transition().duration(750),
      delay = function(d, i) { return i * 50; };
  
  transition.selectAll(".bar")
      .delay(delay)
      .attr("x", function(d) { return x0(d.letter); });
  
  transition.select(".x.axis")
      .call(xAxis)
    .selectAll("g")
      .delay(delay);
  </code></pre>
  
  <p>The x0 scale is created as a copy of the x scale to provide a static reference point for the transition of the bars, as x is tweened during the transition. In the process, I think the x.domain is also set to the target sort order. I thought that the i values would be reset on setting a new domain, but it appears not: they persist through the change in domain order.</p>
  
  <p><b>How can I change the sort order so that the sort always starts with the left-most category?</b> I've tried (unsuccessfully) creating an artificial sort order on the "g", trying to work with multiple domains, etc. I can achieve this using a linear scale, but the ordinal scale should be a more concise and more elegant solution!</p>
  
  <p>I've created <a href="http://jsfiddle.net/ajlund/gfsAL/" rel="nofollow">a fiddle</a> so you can experiment with this.</p>