D3 переход для трансформированного перевода не работает для DIV

Почему свойство преобразования не работает для DIV в D3? Он работает для любых элементов svg, но не для "div". Любое альтернативное решение?

НЕ РАБОТАЕТ

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

РАБОЧАЯ

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

Ответы

Ответ 1

Возникла проблема в старой версии d3.v3.6

Теперь проблема исправлена и работает для DIV или любого элемента HTML.

Попробуйте последнюю версию d3 или любой версии из d3.v3.7

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

Это работает!

Ответ 2

Как уже упоминалось, d3 не поддерживает переход CSS3-преобразований для элементов HTML из коробки. Вам придется создать собственный интерполятор строк, чтобы сделать это для вас.

Примечание. Вам нужно будет найти первоначальный перевод элемента, который вы хотите анимировать. Это также не учитывает префиксы поставщиков.

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

Ответ 3

Это потому, что 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.

Ответ 4

просто

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

не

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

используйте transition-duration когда вы имеете дело с элементом not-svg
Это очень хорошо!