个人中心
gpt4 book ai didi

javascript - D3.js警告: Unresponsive Script Message

转载 作者：行者123 更新时间：2023-12-02 14:59:03 40 4
gpt4 key购买 nike

在 D3 中使用闪烁功能时，一段时间后我收到一条错误消息

.transition()
                                .duration(250)
                                .delay( 0)
                                .each(blink);
<小时/> 
function blink() {

                        var line = d3.select(this);
                        (function repeat() {
                        line = line.transition()
                        .style("opacity", function(d) { return(1);})
                        .transition()
                        .style("opacity", function(d) { return(0);})
                        .each("end", repeat);})();
            }

enter image description here

最佳答案

正如我在评论中所说:

You've created a nested transition, every 17ms, you are creating another transition which in turn fires every 17ms...

要解决此问题，请删除嵌套:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <script>
      
      var svg = d3.select('body')
        .append('svg')
        .attr('width', 300)
        .attr('height', 300);
        
      svg
        .append('line')
        .attr('y1', 150)
        .attr('y2', 150)
        .attr('x1', 0)
        .attr('x2', 300)
        .style('fill', 'none')
        .style('stroke', 'steelblue');
        
      svg.selectAll("line")
        .each(blink);
        
      function blink(){
        var self = d3.select(this);
        self
          .transition()
          .duration(250)
          .style("opacity", function(d) { 
            return self.style("opacity") === "1" ? "0" : "1";
          })
          .each("end", blink);
      }
      
    </script>
  </body>

</html>

当然，如果你只是想让某些东西闪烁，你可以这样做 with straight css :

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <style>
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
    </style>
    
  </head>

  <body>
    <script>
      
      var svg = d3.select('body')
        .append('svg')
        .attr('width', 300)
        .attr('height', 300);
        
      svg
        .append('line')
        .attr('class', 'blink')
        .attr('y1', 150)
        .attr('y2', 150)
        .attr('x1', 0)
        .attr('x2', 300)
        .style('fill', 'none')
        .style('stroke', 'steelblue');       

    </script>
  </body>

</html>

关于javascript - D3.js警告: Unresponsive Script Message，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35579832/

40 4 0
文章推荐： javascript - DocumentHistoriesController# 中的 ActionController::UnknownFormat 和 format.js
文章推荐： java - Spring Cloud 契约(Contract) : Multiple controllers
文章推荐： php - 按 WP_Query 中的自定义 Woocommerce 产品排序排序
文章推荐： javascript - 在 jquery 文件中调用 javascript 函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com