Angular D3 comprendre la fonction attrTween

Question

J'essaie de comprendre comment utiliser la fonction attrTween dans D3. J'essaie d'implémenter un camembert à partir de l'exemple suivant : http://bl.ocks.org/mbostock/5100636 .

J'ai cependant des problèmes lorsque j'arrive à la partie de la transition.

  private populateGauge(): void {
    const innerRadius = this.radius - 50;
    const outerRadius = this.radius - 10;
    const arc = d3
      .arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .startAngle(0);

    const background = this.svg
      .append('path')
      .datum({ endAngle: this.tau })
      .style('fill', '#ddd')
      .attr('d', arc);
    this.myEndAngle = { endAngle: (this.gaugeData.value / 100) * this.tau };
    const foreground = this.svg
      .append('path')
      .datum(this.myEndAngle)
      .style('fill', 'orange')
      .attr('d', arc);

    foreground
      .transition()
      .duration(1500)
      .attrTween('d', function(newAngle) {
        return function(d) {
          const interpolate = d3.interpolate(d.endAngle, newAngle);
          return function(t) {
            d.endAngle = interpolate(t);
            return arc(d);
          };
        };
      });
    }

J'ai essayé d'utiliser des cas de base simples et d'utiliser des 0 dans la fonction d'interpolation, mais je n'arrive pas à me débarrasser d'une erreur finale, que la dernière instruction de retour provoque (return arc(d)) ;

L'argument de type 'nombre' n'est pas assignable à un paramètre de type 'DefaultArcObject'.

Comment contourner ces problèmes ? Faites-moi savoir si vous avez besoin de plus d'informations.

Answer 1

attrTween('d',...) prend une fonction unique qui renvoie une autre fonction. Vous lui passez une fonction qui est appelée avec la valeur courante de données , index et actuel nœud comme paramètres. Cette fonction doit renvoyer la fonction d'interpolation qui est appelée avec un paramètre temps valeur.

Lorsque je regarde votre code source. Vous avez 3 fonctions imbriquées, et ce n'est pas correct.

Vous devez avoir le commencer y fin en tant que valeurs de la données et ne devrait pas muter les données à l'intérieur d'une fonction tween.

Je préfère créer un arc en dehors de la fonction entre-deux et de l'utiliser pour mon interpolation. Ce qui est plus efficace puisque vous ne créez pas une nouvelle fonction arc à chaque fois.

const myArc = d3.arc();
// ^^^ call methods of arc() to configure settings that won't animate.

foreground
  .transition()
  .duration(1500)
  .attrTween('d', (d) => {
      return (t) => {
        const angle = d3.interpolate(d.endAngle, d.newAngle)(t);
        // ^^^ interpolate datum values using time.
        myArc.startAngle(angle);
        // ^^^ call methods of arc() to configure what you need.
        return myArc(null);
        // ^^^ call arc function to render "d" attribute.
      };
    };
  });

Je trouve qu'il est plus facile d'utiliser le paquet de nœuds "@types/d3"

npm install @types/d3 --save-dev

Vous pouvez ensuite importer ces types dans le fichier TypeScript

import * as d3 from 'd3';

Si vous avez un IDE comme WebStorm. Vous pouvez CTRL+CLICK sur une fonction D3 et voir les définitions de type et les commentaires.