javascript - 转换转换的 d3 转换不适用于 DIV

Question

为什么转换属性不适用于 D3 中的 DIV？它适用于任何 svg 元素，但不适用于“div”。任何替代解决方案？

不工作

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

工作

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

Answer 1

如前所述，d3 不支持开箱即用的 HTML 元素的 CSS3 转换转换。您必须创建一个自定义字符串插值器来为您做这件事。

注意:您必须找到您想要设置动画的元素的初始翻译。这也不考虑 vendor 前缀。

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