如何在 d3.js 中线性插入变换属性？

Question

我想通过在<img> 元素之间不断移动来“摇动”它

transform: translateX(-50px);

和

transform: translateX(50px);

使用 D3.js，像这里：http://plnkr.co/edit/uJeqkizCXcPDmaJazOPa?p=preview，圆甚至不会被插值。怎样才能顺利移动呢？

Answer 1

希望这会有所帮助。不要忘记清除间隔。

var svg = d3.select("#cont").append("svg")
	.attr("width", 400)
	.attr("height", 400);
	
	
	
	var circle = svg.append("circle")
	.attr("cx", 200)
	.attr("cy", 200)
	.attr('r', 10)
    .style('fill', 'black');
	
function trans(){
  circle
  .transition()
  .attr("cx",250)
  .each("end",function() {
    d3.select(this).       
      transition()         
        .attr("cx",200);   
                           
   });
}
 setInterval(function(){trans()}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="cont"></div>