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

Question

我希望通过在{/ p>之间不断移动来“摇动”<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>