转换的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转换过渡.您必须创建一个自定义字符串插补器来为您完成.

注意:您必须找出想要设置动画的元素的初始翻译.这也没有考虑供应商前缀.

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

Answer 2

旧版本d3.v3.6有问题

该问题现已修复，并且适用于 DIV 或任何 HTML 元素。

尝试最新版本的 d3 或 d3.v3.7 中的任何版本

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

有用！