D3.js how to go in the opposite direction with the basic elements of SVG

Question

Currently, the D3 transition of this bar starts from left to right, I think this is the default.

How can I start the transition from right to left? Here's my transition: https://jsfiddle.net/kxg9x4gq/39/

var svg = d3.select("#foo")

var bar = svg.append("g")
             .attr("transform", "translate(20,20)")

bar.append("rect")
   .attr("height", 15)
   .transition().duration(700)
   .attr("width", 400)

Answer 1

You can make the panel go from right to left by setting its attribute xbefore and after the transition.

var svg = d3.select("#foo")

var bar = svg.append("g")
             .attr("transform", "translate(20,20)")

bar.append("rect")
   .attr("height", 15)
   .attr("x", 400)
   .transition().duration(700)
   .attr("width", 400)
   .attr("x", 0)

rect {
  fill: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="foo" height="200" width="400"></svg>

Run codeHide result

.. svg, . , JSFiddle .