2016-11-23 2 views
1

Я иду через D3 Tips & Tricks, и я на этом графике: http://bl.ocks.org/d3noob/7030f35b72de721622b8.Каково максимальное значение для команды .duration() в d3.js?

Я играю с различными осями, чтобы заставить их повторно визуализировать и динамически изменять размер функции JavaScript, вызванной с помощью кнопки. Я хочу перерисовать ось x, так что для полной загрузки потребуется больше времени, чем повторно сформированный элемент линии.

// 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); 

}); 

В теории, я полагаю, что команда .duration() может принимать highest integer value that JavaScript accepts как .millisecond. Это верно? Я очень хочу знать, есть ли здесь предел в отношении максимально возможной продолжительности, которую я могу сделать.

ответ

3

Я просто закодированы на быстрый пример с Number.MAX_VALUE и d3 не жалуется:

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

Некоторые быстрые расчеты говорят мне, однако, что это займет 1x10 итерации переходного цикла, чтобы переместить мой круг 1px, так что при условии, что переходный цикл срабатывает каждые 17 миллисекунд, это около 5,34 × 10 лет до того, как я вижу какое-либо движение ....