Progressing in a connected sequence of changes on a linear graph with distinct points and a pause

Question

Progressing in a connected sequence of changes on a linear graph with distinct points and a pause

A jsfiddle has been created here.

Looking to move a circle along a sine wave graph, triggered by a click event. The circle should stop at specific x and y value pairs on the graph before moving to the last point and looping back to the first (ideally until a stop button is pressed).

The issue currently is that the circle only moves horizontally and the delay effect is only noticeable at the start.

This is the relevant code snippet (full example in the provided link):

Circle creation:

// circle to be moved along the graph
  var circle = svg.append("circle")
                .attr("id", "concindi")
                .attr("cx", x_scale(xval[0]))
                .attr("cy", y_scale(yval[0]))
                .attr("transform", "translate(" + (0) + "," + (-1 * padding + 15) + ")")
                .attr("r", 6)
                .style("fill", 'red');

Movement process:

var coordinates = d3.zip(xval, yval);

svg.select("#concindi").on("click", function() {

    coordinates.forEach(function(ci, indi){
      
      if (indi < (coordinates.length - 1)){
        
        console.log(coordinates[indi + 1][0]);
        console.log(coordinates[indi + 1][1]);
        d3.select("#concindi")
          .transition()
          .delay(2000)
          .duration(5000)
          .ease("linear")
          .attr("cx", x_scale(coordinates[indi + 1][0]))
          .attr("cy", y_scale(coordinates[indi + 1][1]));
      }

    });

The loop might not be utilized correctly here. The goal is to move from one x/y pair to the next every 5 seconds after a 2-second pause. Currently, the delay is only visible initially and the movement is horizontal.

Any suggestions on how to correct this?

javascript select d3.js transition

Answer 1

Answer №1

Have you considered utilizing Bostock's translateAlong function for this task?

function translateAlong(path) {
    var length = path.getTotalLength();
    return function(data, index, array) {
        return function(time) {
            var point = path.getPointAtLength(time * length);
            return "translate(" + point.x + "," + point.y + ")";
        };
    };
}

Take a look at the demonstration below:

// A function to generate some data
function getSinValue(value) {
  return 30 * Math.sin(value * 0.25) + 35;
}

var width = 400;
var height = 200;
var padding = 50;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xRangeMin = 0;
var xRangeMax = 50;

var yRangeMin = 0;
var yRangeMax = 100;

var xScale = d3.scale.linear()
  .domain([xRangeMin, xRangeMax])
  .range([padding, width - padding * 2]);

var yScale = d3.scale.linear()
  .domain([yRangeMin, yRangeMax])
  .range([height - padding, padding]);

// Creating the data
var xValues = d3.range(xRangeMin, xRangeMax, 1);
var yValues = xValues.map(getSinValue);

// Zip coordinates for convenience
var coordinatePairs = d3.zip(xValues, yValues);

// Defining the line graph
var lineGraph = d3.svg.line()
  .x(function(d) {
    return xScale(d[0]);
  })
  .y(function(d) {
    return yScale(d[1]);
  })
  .interpolate("linear");

// Drawing the graph
var sineGraph = svg.append("path")
  .attr("d", lineGraph(coordinatePairs))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

// The circle that will move along the graph
var movingCircle = svg.append("circle")
  .attr("id", "movingCircle")
  .attr("transform", "translate(" + (xScale(xValues[0])) + "," + (yScale(yValues[0])) + ")")
  .attr("r", 6)
  .style("fill", 'red');

svg.select("#movingCircle").on("click", function() {
  d3.select(this).transition()
    .duration(5000)
    .attrTween("transform", translateAlong(sineGraph.node()));
});

// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var length = path.getTotalLength();
  return function(data, index, array) {
    return function(time) {
      var point = path.getPointAtLength(time * length);
      return "translate(" + point.x + "," + point.y + ")";
    };
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

It's important to note that using forEach will execute instantaneously through the array. Therefore, jumping from one coordinate to another with your current method is not feasible (as mentioned here: "I am pretty sure that I use the loop in a wrong manner").

If you wish to introduce a 2-second delay between points, consider chaining transitions. Below is an example where the delay and duration times are reduced for better visibility:

var indexCounter = 0;
animate();

function animate() {
    indexCounter++;
    d3.select(this).transition()
        .delay(500)
        .duration(500)
        .attr("transform", "translate(" + (xScale(coordinatePairs[indexCounter][0])) 
            + "," + (yScale(coordinatePairs[indexCounter][1])) + ")")
        .each("end", animate);
}

View the updated demo below:

// Function to generate data
function getSinValue(value) {
  return 30 * Math.sin(value * 0.25) + 35;
}

var width = 400;
var height = 200;
var padding = 50;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xRangeMin = 0;
var xRangeMax = 50;

var yRangeMin = 0;
var yRangeMax = 100;

var xScale = d3.scale.linear()
  .domain([xRangeMin, xRangeMax])
  .range([padding, width - padding * 2]);

var yScale = d3.scale.linear()
  .domain([yRangeMin, yRangeMax])
  .range([height - padding, padding]);

// Generating the data
var xValues = d3.range(xRangeMin, xRangeMax, 1);
var yValues = xValues.map(getSinValue);

// Zipping coordinates for convenience
var coordinatePairs = d3.zip(xValues, yValues);

// Defining the line graph
var lineGraph = d3.svg.line()
  .x(function(d) {
    return xScale(d[0]);
  })
  .y(function(d) {
    return yScale(d[1]);
  })
  .interpolate("linear");

// Drawing the graph
var sineGraph = svg.append("path")
  .attr("d", lineGraph(coordinatePairs))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

// The circle to move along the graph
var animatedCircle = svg.append("circle")
  .attr("id", "animatedCircle")
  .attr("transform", "translate(" + (xScale(xValues[0])) + "," + (yScale(yValues[0])) + ")")
  .attr("r", 6)
  .style("fill", 'red');

svg.select("#animatedCircle").on("click", function() {
  var indexCounter = 0;
  var self = this;
  animate();
  
  function animate() {
    indexCounter++;
    d3.select(self).transition()
      .delay(500)
      .duration(500)
      .attr("transform", "translate(" + (xScale(coordinatePairs[indexCounter][0])) + "," + (yScale(coordinatePairs[indexCounter][1])) + ")")
      .each("end", animate);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

Have you considered utilizing Bostock's translateAlong function for this task?

function translateAlong(path) {
    var length = path.getTotalLength();
    return function(data, index, array) {
        return function(time) {
            var point = path.getPointAtLength(time * length);
            return "translate(" + point.x + "," + point.y + ")";
        };
    };
}

Take a look at the demonstration below:

// A function to generate some data
function getSinValue(value) {
  return 30 * Math.sin(value * 0.25) + 35;
}

var width = 400;
var height = 200;
var padding = 50;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xRangeMin = 0;
var xRangeMax = 50;

var yRangeMin = 0;
var yRangeMax = 100;

var xScale = d3.scale.linear()
  .domain([xRangeMin, xRangeMax])
  .range([padding, width - padding * 2]);

var yScale = d3.scale.linear()
  .domain([yRangeMin, yRangeMax])
  .range([height - padding, padding]);

// Creating the data
var xValues = d3.range(xRangeMin, xRangeMax, 1);
var yValues = xValues.map(getSinValue);

// Zip coordinates for convenience
var coordinatePairs = d3.zip(xValues, yValues);

// Defining the line graph
var lineGraph = d3.svg.line()
  .x(function(d) {
    return xScale(d[0]);
  })
  .y(function(d) {
    return yScale(d[1]);
  })
  .interpolate("linear");

// Drawing the graph
var sineGraph = svg.append("path")
  .attr("d", lineGraph(coordinatePairs))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

// The circle that will move along the graph
var movingCircle = svg.append("circle")
  .attr("id", "movingCircle")
  .attr("transform", "translate(" + (xScale(xValues[0])) + "," + (yScale(yValues[0])) + ")")
  .attr("r", 6)
  .style("fill", 'red');

svg.select("#movingCircle").on("click", function() {
  d3.select(this).transition()
    .duration(5000)
    .attrTween("transform", translateAlong(sineGraph.node()));
});

// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var length = path.getTotalLength();
  return function(data, index, array) {
    return function(time) {
      var point = path.getPointAtLength(time * length);
      return "translate(" + point.x + "," + point.y + ")";
    };
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

It's important to note that using forEach will execute instantaneously through the array. Therefore, jumping from one coordinate to another with your current method is not feasible (as mentioned here: "I am pretty sure that I use the loop in a wrong manner").

If you wish to introduce a 2-second delay between points, consider chaining transitions. Below is an example where the delay and duration times are reduced for better visibility:

var indexCounter = 0;
animate();

function animate() {
    indexCounter++;
    d3.select(this).transition()
        .delay(500)
        .duration(500)
        .attr("transform", "translate(" + (xScale(coordinatePairs[indexCounter][0])) 
            + "," + (yScale(coordinatePairs[indexCounter][1])) + ")")
        .each("end", animate);
}

View the updated demo below:

// Function to generate data
function getSinValue(value) {
  return 30 * Math.sin(value * 0.25) + 35;
}

var width = 400;
var height = 200;
var padding = 50;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xRangeMin = 0;
var xRangeMax = 50;

var yRangeMin = 0;
var yRangeMax = 100;

var xScale = d3.scale.linear()
  .domain([xRangeMin, xRangeMax])
  .range([padding, width - padding * 2]);

var yScale = d3.scale.linear()
  .domain([yRangeMin, yRangeMax])
  .range([height - padding, padding]);

// Generating the data
var xValues = d3.range(xRangeMin, xRangeMax, 1);
var yValues = xValues.map(getSinValue);

// Zipping coordinates for convenience
var coordinatePairs = d3.zip(xValues, yValues);

// Defining the line graph
var lineGraph = d3.svg.line()
  .x(function(d) {
    return xScale(d[0]);
  })
  .y(function(d) {
    return yScale(d[1]);
  })
  .interpolate("linear");

// Drawing the graph
var sineGraph = svg.append("path")
  .attr("d", lineGraph(coordinatePairs))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

// The circle to move along the graph
var animatedCircle = svg.append("circle")
  .attr("id", "animatedCircle")
  .attr("transform", "translate(" + (xScale(xValues[0])) + "," + (yScale(yValues[0])) + ")")
  .attr("r", 6)
  .style("fill", 'red');

svg.select("#animatedCircle").on("click", function() {
  var indexCounter = 0;
  var self = this;
  animate();
  
  function animate() {
    indexCounter++;
    d3.select(self).transition()
      .delay(500)
      .duration(500)
      .attr("transform", "translate(" + (xScale(coordinatePairs[indexCounter][0])) + "," + (yScale(coordinatePairs[indexCounter][1])) + ")")
      .each("end", animate);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Progressing in a connected sequence of changes on a linear graph with distinct points and a pause

Answer №1

Similar questions

Creating a password with two distinct numbers using regular expressions

Modify the name of the selected option value

Preparing the data before displaying it

Extracting public data from social media profiles as displayed in Smartr

How can I select a checkbox dynamically during runtime?

Highcharts Maps - Circular zoom controls

Ajax transmitting data with concealed characters

The custom component I created seems to be unaffected by the inline styles in React

Integrating additional JavaScript into an Ionic 2 project

Slerping with quaternions in Three.js can produce undesirable outcomes when near the poles

Utilizing Node Js for Form Data Transmission and Retrieval

What is the process of duplicating form fields using PHP?

Challenges encountered when inserting nested data into MongoDB

Ember application experiencing trouble displaying Facebook Like Box

What is the best way to update the content of a particular div and its associated link ID whenever the link is clicked?

Switching images through onmouseover, onmouseout, and onclick interactions

What steps are needed to enable the keyboard on a Otree application for mobile devices?

Discover the step-by-step guide for inserting personalized HTML into the current widget screen on Odoo 12 with

What could be causing the PAGE CSS to malfunction?

What is the best way to show the current date and time?