D3.js Wie man mit grundlegenden SVG-Elementen in die entgegengesetzte Richtung übergeht

Question

Derzeit beginnt der D3-Übergang dieses Balkens von links nach rechts, ich glaube, es ist der Standard.

Wie kann ich stattdessen einen Übergang von rechts nach links machen? Hier ist mein Übergang: 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

Sie die Bar erhalten können vor und nach dem Übergang, indem sein x Attribut von rechts nach links zu überführen.

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>

Hinweis: änderte ich die Breite des svg Element dies oben richtig auf dem Stapel Snippet zu bekommen zu arbeiten. Es scheint auf mit Ihrem ursprünglichen Wert zu arbeiten.