What is the maximum value for the .duration() command in d3.js?

Question

I am going through D3 Tips & Tricks and i'm on this graph: http://bl.ocks.org/d3noob/7030f35b72de721622b8.

I am playing around with the different axises to get them to re-render and re-size dynamically upon a JavaScript function has been called via a button. I want to re-render the x axis so that it takes longer to fully load than the re-generated line element.

// Select the section we want to apply our changes to
var svg = d3.select("body").transition().delay(500).style("stroke", "green");

// Make the changes
    svg.select(".line")   // change the line
        .duration(750)
        .style("stroke", "red")
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(1750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(1000000000)
        .call(yAxis);

});

In theory, I suppose that .duration() command can take the highest integer value that JavaScript accepts as a .millisecond. Is that correct? I am keen to know if there is a limit here as to the longest possible duration I can make.

score 3 · Accepted Answer · answered Nov 23 '16 at 16:28

I just coded up a quick example with Number.MAX_VALUE and d3 doesn't complain:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
      
      var svg = d3.select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 500);
        
      var c = svg.append('circle')
        .attr('transform', 'translate(20,20)')
        .attr('r', 20)
        .style('fill', 'steelblue');
      
      c.transition()
        .duration(Number.MAX_VALUE)
        .ease(d3.easeLinear)
        .tween("attr.transform", function() {
          var self = d3.select(this),
              i = d3.interpolateTransformSvg('translate(20,20)', 'translate(400,400)');
          return function(t) {
            console.log(i(t));
            self.attr('transform',i(t));
          };
        });
    </script>
  </body>

</html>

Some quick calculations tell me though that it'll take 1x10³⁰⁶ iterations of the transition loop to move my circle 1px, so assuming the transition loop is firing every 17 milliseconds, that's around 5.34 × 10²⁹⁶ years before I see any movement....

What is the maximum value for the .duration() command in d3.js?

1 Answers1