d3 transition for transform translate not working for DIV

Question

Why is the transform property not working for DIV in D3? It works for any svg elements, but not for "div". Any alternate solution?

NOT WORKING

d3.select("div")
  .transition()
  .style("transform","translate(0px,-500px)");

WORKING

d3.select("circle")
  .transition()
  .style("transform","translate(0px,-500px)");

Answer 1

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;
        });

Answer 2

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.