D3.js基本SVG要素と反対方向に遷移する方法

Question

現在、このバーのD3トランジションは左から右に始まりますが、これはデフォルトです。

代わりに右から左にトランジションを開始するにはどうすればよいですか？ は、ここに私の推移です： 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

あなたがバーを移行する前と後にそのx属性を設定することで、右から左への移行を得ることができます。

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>

注：私は、これは上記のスタックスニペット上で適切に動作させるためにsvg要素の幅を変更しました。元の値でJSFiddleで動作するようです。