Question

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

不工作

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

WORKING

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

Answer 1

如上所述，d3并不支持开箱即用的HTML3元素转换。您必须创建一个自定义字符串插补器来为您完成。

注意：您必须找出想要制作动画的元素的初始翻译。这也没有考虑供应商前缀。

var startingTranslateState = '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
效果很好！

转换的d3转换不适用于DIV

4 个答案: