What is causing the malfunction in this straightforward attrTween demonstration?

Question

What is causing the malfunction in this straightforward attrTween demonstration?

Seeking to grasp the concept of attrTween, I am exploring how to make a square move using this method instead of the simpler attr approach. Despite no errors being displayed in the console, the following example does not produce any visible results, leaving me uncertain about where I may have misstepped.

var svg = d3.select("svg")
var pi = Math.PI;

var mySquare=svg.append("rect")
  .attr("x",60)
  .attr("y",60)
  .attr("width",200)
  .attr("height",200);

mySquare.transition()
  .duration(2000)
  .attrTween("x", d3.interpolate(60,400))

To view the live demonstration of this example, visit: .

javascript d3.js

Answer 1

Answer №1

According to the information provided in the API, it states that the return value must be an interpolator, which is a function...

Here is one technique using an inline function.

http://jsfiddle.net/TsMgJ/2/

mySquare.transition()
  .duration(2000)
  .delay(500)
  .attrTween("x", function (d, i, a) { 
       console.log(a); // displays 60, the initial value of "x"
       return d3.interpolate(a, 400); 
  });

Another approach is to have the function outside of the chaining.

http://jsfiddle.net/tz5KT/1/

mySquare.transition()
  .duration(2000)
  .delay(500)
  .attrTween("x", myTweenFunction ); 

function myTweenFunction(d, i, a) {
  console.log( a ); // displays 60, the current value (initial value)
  return d3.interpolate(a, 400);
}

Answer 2

According to the information provided in the API, it states that the return value must be an interpolator, which is a function...

Here is one technique using an inline function.

http://jsfiddle.net/TsMgJ/2/

mySquare.transition()
  .duration(2000)
  .delay(500)
  .attrTween("x", function (d, i, a) { 
       console.log(a); // displays 60, the initial value of "x"
       return d3.interpolate(a, 400); 
  });

Another approach is to have the function outside of the chaining.

http://jsfiddle.net/tz5KT/1/

mySquare.transition()
  .duration(2000)
  .delay(500)
  .attrTween("x", myTweenFunction ); 

function myTweenFunction(d, i, a) {
  console.log( a ); // displays 60, the current value (initial value)
  return d3.interpolate(a, 400);
}

What is causing the malfunction in this straightforward attrTween demonstration?

Answer №1

Similar questions

Tips for inserting a php variable into an html document

Retrieve the most recent version of the document stored in MongoDB

JavaScript: Reorder an array to alternate between largest and smallest elements, starting with the largest

Unable to access property within JSON object sent via POST request

Leveraging AJAX for transmitting form information to a php script without relying on jQuery

React Image Slider not loading pictures

Utilize the power of AJAX and Laravel to seamlessly upload an Excel file

The Socket.io application is facing deployment issues on the Heroku platform

Sharing models between AngularJS controllers

Navigating through an array of latitude and longitude pairs during an AJAX request

I'm struggling with developing react applications due to problems with canvas elements

jquery-ui allowing to resize child divisions as well

Using AJAX and Spring MVC to render JSON objects in bracket notation within a POST request

For an unknown reason, I am facing difficulties in using the Storage feature from @angular/fire in ANGULAR 16

Delay the execution of @mouseover in Vue: a guide to managing scope

Encountering issues while attempting to pass a function into axios.then and catch and receiving errors

Experiencing issues with this.$refs returning undefined within a Nuxt project when attempting to retrieve the height of a div element

Conceal the slider thumb within the material-ui framework

Tips for positioning input fields and labels in both horizontal and vertical alignment

What is the best way to format a date as "2020-01-16 07:29:43.657519000 Z" using JavaScript?