转换转换的 d3 转换不适用于 DIV答案

【问题标题】：d3 transition for transform translate not working for DIV转换转换的 d3 转换不适用于 DIV
【发布时间】：2014-07-24 16:19:30
【问题描述】：

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

不工作

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

工作中

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

【问题讨论】：

标签： javascript svg d3.js transition

【解决方案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;
        });

【讨论】：

【解决方案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。

【讨论】：

jiri，你知道吗？我想使用硬件加速的 CSS 属性来使过渡平滑柔滑。因此我正在尝试转换，翻译。我很清楚“上，左”会起作用。我正在为这种情况编写自己的转换方法。看来d3在style方法中不支持这个属性，只在attr中支持。

【解决方案3】：

旧版本 d3.v3.6 出现问题

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

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

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

有效！

【讨论】：

可以分享您的组合工作 HTML、CSS 和 JS 吗？我自己用 D3 翻译 div 时遇到问题。这是一个快速演示开始，谢谢！ jsbin.com/wogowa

【解决方案4】：

只是

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

不是

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

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

【讨论】：