How to interpolate transform property linearly in d3.js?

Question

I want to "shake" an <img> element by constantly moving it between

transform: translateX(-50px);

and

transform: translateX(50px);

Using D3.js, like here: http://plnkr.co/edit/uJeqkizCXcPDmaJazOPa?p=preview , the circle will not even be interpolated. How can I move it smoothly?

SVG doesn't have translateX: plnkr.co/edit/zxh5yjvkqpFIeoL8Iq6L?p=preview — Lars Kotthoff
– Lars Kotthoff, Commented Feb 25, 2015 at 9:16
And <img> has no cx, cy. I ended up interpolating left and top — kadrian
– kadrian, Commented Mar 1, 2015 at 6:03

Rudra · Accepted Answer · 2015-02-25 09:23:20Z

1

Hope this helps. Don't forget to clear the interval.

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>

answered Feb 25, 2015 at 9:23

Rudra

1,68816 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kadrian Over a year ago

Sorry, I didn't specify this correctly. My actual element is no circle, but an <img> tag, so manipulating cx and cy won't work. I really want to know about a translate interpolation that is as easy as possible.

Collectives™ on Stack Overflow

How to interpolate transform property linearly in d3.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related