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與您的原始價值工作。