D3.js来管理Webkit translate3d:这可能吗？

Question

有没有人知道如何使用CSS3 Webkit translate3d而不是正常的左css与d3.js. 在iPhone上,translate3d运行得更快,我需要在发布HTML元素后进行转换.

这是我的左css的代码:

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

有一些JQuery的东西,但我更喜欢继续使用d3.js这个项目.知道如何使用translate3d而不是左边的属性制作前面的代码吗？

谢谢

Answer 1

这就是我的方式.对于平滑/功能转换,请确保在对元素执行转换之前将默认值应用于style属性.

默认样式(转换前):

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

过渡样式(转换默认值):

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