CODEWITHSUNDEEP
javascriptd3.js
Bob Haslett
Bob Haslett

Reputation: 1113

Rotate svg path around its centre d3

I have a simple cog wheel drawn in illustrator. I've placed the svg markup in the index page and all is well. I can access it by its id.

The code below is part of a function that is executed on that time period so I don't need to worry about the time element.

I've looked around and am not understanding the examples I've found. This is what I have:

var motor=d3.select('#wheel')
motor.attr('transform', 'rotate(0, 0, 2)');

I want to rotate a couple of degrees every 300 milliseconds.

Upvotes: 2

Views: 1163

Answers (1)

Seemant Kulleen
Seemant Kulleen

Reputation: 131

Your original code doesn't seem very functional (the commas in rotate are not needed). So taking those out, your statement is asking the svg to rotate by 0 degrees around the x, y coordinates 0, 2 (2 pixels down from the top-left corner). What you want is closer to:

var motor=d3.select('#wheel')
motor.attr('transform', 'rotate(2 ' + (objectwidth / 2) + ' ' + (objectHeight/2) + ')');

Upvotes: 2

Related Questions