2016-11-23 14 views
1

私はD3 Tips & Tricksを経由しています。私はこのグラフにあります:http://bl.ocks.org/d3noob/7030f35b72de721622b8です。d3.jsの.duration()コマンドの最大値はいくらですか?

ボタンを使用して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()コマンドは.millisecondとしてhighest integer value that JavaScript acceptsを取ることができることとします。あれは正しいですか?可能な限り最長の期間があるかどうかを知りたいと思っています。

答えて

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>
が私に教えて1×10 のトランジションループを反復して、遷移ループが約17ミリ秒ごとに発火していると仮定すると、約5.34×10 私は動きを見る前に....

関連する問題