D3.js to manage Webkit translate3d : Is that possible?

Question

Does anybody know how to use CSS3 Webkit translate3d instead of normal left css with d3.js. On iPhone translate3d run faster and I need to do it on a transition after a release of an HTML element.

Here is my code for the left css :

d3.select("#myHTMLElem").transition()
    .style("left", myNewPosX) + "px")
    .duration(500)
    .ease("cubic-in-out")
    .each("end", function(d) {
        // Do something after
});

There is something with JQuery, but I would prefer to keep using d3.js for this project. Any idea how to make the previous code using the translate3d instead of the left property?

Thanks

Steve Miller Steve Miller · Accepted Answer · 2012-11-02T18:58:03

this is how I do it. For a smooth/functional transition, make sure you apply the default values to the style attribute before the transition is executed on the element.

Default Style (before transition):

var svg = d3.select("div#wrapper").append("svg").append("g").attr("id", "usg").attr("style", function () {
    return "-webkit-transform: perspective(800) scale(1) scale3d(1, 1, 1) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);";
});

Transition Style (transform the default values):

d3.select("#usg").transition().duration(2000).attr("style", function () {
    return "-webkit-transform: perspective(800) scale(1) scale3d(1, 1, 2) rotate3d(1, 0, 0, 55deg) translate3d(0px, 198px, 0px);";
});

D3.js to manage Webkit translate3d : Is that possible?

1 Answers