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

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

• javascript
• svg
• d3.js
• transition

4 Answers 4

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

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.

There was an issue in the old version d3.v3.6

The issue is fixed now and it works for DIV or any HTML element.

Try the latest version of d3 or any version from d3.v3.7

https://github.com/mbostock/d3/releases

It works!

just

d3.select('div')
 .style('transition-duration', '.5s')
 .style('transform', 'translate(0px, -500px)');

not

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

use transition-duration when you are dealing not-svg element
It doing very well !