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 元素的宽度以使其在上面的 Stack Snippet 上正常工作。它似乎确实适用于 JSFiddle 与您的原始值。

D3.js 如何使用基本 SVG 元素以相反方向过渡

D3.js how to transition in opposite direction with basic SVG elements

animation

transition

css-transitions

d3.js