如何在d3.js中线性插值transform属性

How to interpolate transform property linearly in d3.js?

本文关键字：线性 插值 transform 属性 js d3      更新时间：2024-05-27

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

transform: translateX(-50px);

和

transform: translateX(50px);

使用D3.js，如下所示：http://plnkr.co/edit/uJeqkizCXcPDmaJazOPa?p=preview，甚至不会对圆进行插值。我怎样才能顺利地移动它？

希望这能有所帮助。别忘了清空间隔。

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>

相关文章：