Question

我正在浏览D3 Tips & Tricks，我正在使用此图表：http://bl.ocks.org/d3noob/7030f35b72de721622b8。

我正在使用不同的轴来让它们在通过按钮调用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。那是对的吗？我很想知道这里是否有最长的可能持续时间。

Answer 1

我刚刚使用Number.MAX_VALUE编写了一个快速示例，d3没有抱怨：

<!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>

一些快速计算告诉我，虽然过渡循环需要1x10 ³⁰⁶次迭代来移动我的圆1px，所以假设过渡循环每17毫秒触发一次，那就是在看到任何动作之前，大约5.34×10 ²⁹⁶ 年 ....

d3.js中.duration（）命令的最大值是多少？

1 个答案: