En D3 V4, ¿cómo usar .ease (“rebotar”) correctamente?

Aquí está mi código:

   circle          var width = 400; var height = 400; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); var circle1 = svg.append("circle") .attr("cx", 100) .attr("cy", 100) .attr("r", 45) .style("fill","green"); circle1.transition() .duration(1000) //延迟1000ms .attr("cx", 300); var circle2 = svg.append("circle") .attr("cx", 100) .attr("cy", 100) .attr("r", 45) .style("fill","green"); circle2.transition() .duration(1500) .attr("cx", 300) .style("fill", "red"); var circle3 = svg.append("circle") .attr("cx", 100) .attr("cy", 100) .attr("r", 45) .style("fill","green"); circle3.transition() .duration(2000) .transition() .ease("bounce") .attr("cx", 300) .style("fill", "red") .attr("r", 25);           

Cuando aprendo cómo usar el .ease("bounce") en d3 v4.x, el error siempre se salta en html: 45. En la introducción oficial: .ease("bounce") ahora se debe utilizar de esta manera:

 d3.easeBounce(t) 

pero tampoco funciona, así que no sé cómo modificarlo. ¿Me podría dar una buena introducción? ¡Gracias!

2 Solutions collect form web for “En D3 V4, ¿cómo usar .ease (“rebotar”) correctamente?”

La documentación en transition.ease([value]) nos dice que

El valor debe ser especificado como una función.

Por lo tanto, solo necesita pasar la función de aceleración d3.easeBounce sin llamarla (tenga en cuenta que no hay paréntesis después de d3.easeBounce )

 circle3.transition() .duration(2000) .transition() .ease(d3.easeBounce) // Pass in the easing function 

Estoy de acuerdo con la respuesta de Altocumulus , pero trato de deshacerme de uno de los .transition() medios, y funcionará bien.

 circle3.transition() .duration(2000) .ease(d3.easeBounce) 
  • Etiquetar el arco exterior (gráfico circular) d3.js
  • d3: ¿qué es el yo como en d3.select (self.frameElement) .style ("altura", altura + "px");
  • Cómo get el máximo valor de una matriz de objects para usar en d3.scale.linear (). Domain ()
  • Forma de relleno D3 con image usando patrón
  • D3.js agregar punto de intersección y área entre dos paths
  • nvd3.js: no se puede cambiar el color de la línea en el gráfico de líneas
  • Month Path solo calcula el mes, no el range de dates actual
  • Transición D3 en barras dentro de una window emergente
  • Separar datos de datahash
  • Convirtiendo la function de Javascript a Typescript incluyendo getComputedTextLength ()
  • ¿Cuál es la mejor manera de hacer que un layout de visualización d3.js responda?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.