Силовой макет узла вращения

Question

Хорошо, сначала - look at this fiddle. Вы должны видеть фигуры, вращающиеся взад и вперед, как сумасшедшие.

Это то, что происходит:

force.on("tick", function(e) { 
    vis.selectAll("path") 
     .attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")" 

       // this is the thing 
       +"rotate(" + Math.random() * 50 + ")"; 
    }); 
}); 

На каждом тике я изменяя transform: rotate() к Math.random() * 50 в этом случае.

Теперь, что я хочу, это плавное вращение. Не этот отрывистый материал.

См. this, чтобы лучше понять, что я имею в виду. Представьте себе высоту как поворот. Серая коробка представляет то, что у меня есть сейчас, синий - что я хочу.

Я пробовал применить 'transition: all 1s ease' CSS к этому элементу, но он просто игнорирует его, я, очевидно, делаю это неправильно. Итак, как я могу сделать это бесконечным вращение назад и вперед, как если бы я использовал переходы CSS3?

Answer 1

Каждый тик вы произвольно устанавливаете вращение на что-то между 0 и 50 градусами вращения. Вам необходимо поддерживать текущее вращение, вычислять смещение, а затем устанавливать поворот на текущее + смещение.

Вот обновленная функция клещ:

force.on("tick", function(e) { 
    vis.selectAll("path") 
     .attr("transform", function(d) { 
     if(!d.rotate) { 
      d.rotate = Math.random() * 50; 
     } else { 
      d.rotate = d.rotate + 1; 
     } 
     return "translate(" + d.x + "," + d.y + ")" 
       +"rotate(" + d.rotate + ")"; 
    }); 
}); 

Вот обновленный рабочий пример: https://jsfiddle.net/1aLc7x4j/