d3 transition for transform translate not working for DIV
It is because div
is not an SVG
element.
Positioning with a transform style can be handled only within SVG
.
To handle position of the div
, just create something like this:
d3.select("div")
.style("position","absolute")
.style("top","0px")
.transition()
.style("top","50px");
For more info about positioning regular XHTML elements, visit http://www.w3schools.com/css/css_positioning.asp.
As mentioned, d3 doesn't support the transitioning of CSS3 transforms for HTML elements out of the box. You'll have to create a custom string interpolator to do it for you.
Note: You'll have to find out the initial translate of the element your wanting to animate. This also doesn't take into account vendor-prefixes.
var startTranslateState = 'translate(0px,0px)';
var endTranslateState = 'translate(0px,-500px)';
var translateInterpolator = d3.interpolateString(startTranslateState, endTranslateState);
d3.select("div")
.transition()
.styleTween('transform', function (d) {
return translateInterpolator;
});