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) 
  • GetBoundingClientRect pero relativo a todo el documento
  • Dimple js plot no escala correctamente en Firefox
  • d3 js - cómo invertir d3.extent
  • intersección de routes cerradas svg
  • ¿Cómo se elimina un controller utilizando un selector d3.js?
  • D3 - Arcos de transición en Sunburst Chart
  • Agregar label de text al nodo d3 en el layout de la Fuerza
  • D3: Cuando agrego una transición, mi mouseover deja de funcionar ... ¿por qué?
  • problema al usar el pincel d3 en una línea + gráfico de barras (acercar la línea + gráfico de barras)
  • hacer un arco en d3.js
  • Solución de renderizado nvd3.js para Internet Explorer
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.