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