D3.js animer une rotation

Je vais avoir des ennuis lorsque j'essaie d'exécuter correctement une rotation de l'animation à l'aide de la D3.js de la bibliothèque. Le problème a à voir avec le point que je veux faire tourner l'élément sur.

Ici est un violon j'ai fait pour montrer ce que je veux dire (au ralenti): http://jsfiddle.net/74mCb/

Il semble que la source du problème se trouve ici:

.attr("transform", "rotate(-60, 150,130)");

Puis-je la faire tourner comme suit:

.attr("transform", "rotate(40 150,130)");

Je voudrais le bout de l'aiguille pour rester en position (le centre de rotation), quelqu'un pourrait-il expliquer ce que je fais de mal?

Merci!

OriginalL'auteur frshca | 2012-11-09

  1. 27

    C'est un peu difficile à saisir (je ne comprends pas tout moi-même) mais D3 doit savoir comment interpoler entre les deux chaînes de caractères qui représentent votre rotation.

    function turnNeedle()
{

    needle
      .transition()
      .duration(2000)
      .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString("rotate(-60, 150, 130)", "rotate(60, 150, 130)");
    }

}

    d est le système de référence, i est l'indice, a est l'attribut dans le cas où vous voulez faire de cette piloté par les données.

    http://jsfiddle.net/SHF2M/

    Belle réponse - peut-être plus facile que la mienne :).
    Wow, c'est un peu ennuyeux. Eh bien je vous remercie de me présenter .attrTween()!

    OriginalL'auteur Duopixel

  2. 10

    Voici ce que je pense qui se passe: par le SVG spec, la transformation

    rotate(40 150,130)

    est équivalent à:

    translate(150,130) rotate(40) translate(-150, -130)

    Il ressemble D3 est l'animation de la traduction ainsi que la rotation interne d3.transform représentation de rotate(40 150,130) est une rotation du composant + un module de traduction, de sorte que les deux sont inclus dans la période de transition.

    Le plus facile de résoudre ici est d'attirer votre aiguille à l'origine, de la traduire avec une enveloppe extérieure g élément à la position correcte, puis le faire pivoter:

    var needle = svg
  .append("g")
    .attr("class", "needle")
    .attr("transform", "translate(150 , 130)")
  .append("path")
    .attr("class", "tri")
    //your path may have been prettier
    .attr("d", "M-3 0 L0 -130 L3 0 S3 5 0 5 S-3 5 -3 0 Z")
    .attr("transform", "rotate(-60)");

    puis

    needle
    .transition()
    .duration(2000)
    .attr("transform", "rotate(40)");

    Voir le travail de violon: http://jsfiddle.net/nrabinowitz/74mCb/1/

    Ah, c'est pourquoi il traduit et tourne en même temps! J'ai toujours haussa les épaules comme un caprice.
    Ouais, la dernière solution (redessiner l'aiguille à l'origine) n'est pas seulement la plus simple et la plus élégante, c'est aussi le plus approprié. C'est ce que l'on ferait si l'animation de l'aiguille dans l'interface graphique de l'outil (Flash, 3D, éditeurs, etc).

    OriginalL'auteur nrabinowitz