转换的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

这是因为div不是SVG元素。

使用变换样式定位只能在SVG处理。

要处理div位置，只需创建这样的东西：

d3.select("div")
 .style("position","absolute")
 .style("top","0px")
 .transition()
 .style("top","50px");

有关定位常规XHTML元素的更多信息，请访问http://www.w3schools.com/css/css_positioning.asp 。

Answer 3

旧版本d3.v3.6中存在问题

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

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

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

有用！

Answer 4

只是

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

不

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

在处理not-svg元素时使用transition-duration
它做得很好！