个人中心
gpt4 book ai didi

javascript - 延迟启动力模拟

转载 作者：行者123 更新时间：2023-12-02 22:38:27 25 4
gpt4 key购买 nike

我想将力模拟的开始延迟大约 2 秒。我该怎么做呢？我觉得你应该能够说“如果勾选< n，不要开始”或类似的话......但我不明白这是如何或即使这是可能的。我已经查看了文档，但不知道。

如果重要的话，这是我正在使用的代码。

          var simulation = d3.forceSimulation(data)
          .force('charge', d3.forceManyBody().strength(33))
          .force('x', d3.forceX().x(function(d) {
            return d.xx;
          }))
          .force('y', d3.forceY().y(function(d) {
            return d.yy;
          }))
          .force('collision', d3.forceCollide().radius(function(d) {
            return d.radius;
          }))
          .on('tick', ticked);




         function ticked() {
          var u = d3.select('svg')
            .selectAll('text')
            .filter(function(d, i) { return i != 0; })
            .data(data);

          u.enter()
            .append('text')
            .merge(u)
            .text(function(d) { return d.t; })
        .attr("fill","rgb(200,101,200)")    
        .attr('x', function(d) {
              return d.x;
            })
            .attr('y', function(d) {
              return d.y;
            })


          u.exit().remove();
        }

最佳答案

D3 模拟将自动开始。根据文档，d3.forceSimulation...

Creates a new simulation with the specified array of nodes and no forces. If nodes is not specified, it defaults to the empty array. The simulator starts automatically. (emphasis mine)

解决方案是停止模拟...

simulation.stop();

然后在所需的延迟后重新启动它，例如使用 setTimeout:

setTimeout(function(){
  simulation.restart();
},2000);

这是您构建时延迟 2 秒的原始代码:

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <title>Force layout (with links)</title>
</head>

<style>
  circle {
    fill: cadetblue;
  }
  
  line {
    stroke: #ccc;
  }
  
  text {
    text-anchor: middle;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    fill: #666;
    font-size: 16px;
  }
</style>

<body>
  <div id="content">
    <svg width="400" height="300">
      <g class="links"></g>
      <g class="nodes"></g>
    </svg>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

  <script>
    var width = 400,
      height = 300

    var nodes = [{
        name: 'A'
      },
      {
        name: 'B'
      },
      {
        name: 'C'
      },
      {
        name: 'D'
      },
      {
        name: 'E'
      },
      {
        name: 'F'
      },
      {
        name: 'G'
      },
      {
        name: 'H'
      },
    ]

    var links = [{
        source: 0,
        target: 1
      },
      {
        source: 0,
        target: 2
      },
      {
        source: 0,
        target: 3
      },
      {
        source: 1,
        target: 6
      },
      {
        source: 3,
        target: 4
      },
      {
        source: 3,
        target: 7
      },
      {
        source: 4,
        target: 5
      },
      {
        source: 4,
        target: 7
      }
    ]

    var simulation = d3.forceSimulation(nodes)
      .force('charge', d3.forceManyBody().strength(-100))
      .force('center', d3.forceCenter(width / 2, height / 2))
      .force('link', d3.forceLink().links(links))
      .on('tick', ticked)
      .stop();

    setTimeout(function() {
      simulation.restart();
    }, 2000);

    function updateLinks() {
      var u = d3.select('.links')
        .selectAll('line')
        .data(links)

      u.enter()
        .append('line')
        .merge(u)
        .attr('x1', function(d) {
          return d.source.x
        })
        .attr('y1', function(d) {
          return d.source.y
        })
        .attr('x2', function(d) {
          return d.target.x
        })
        .attr('y2', function(d) {
          return d.target.y
        })

      u.exit().remove()
    }

    function updateNodes() {
      u = d3.select('.nodes')
        .selectAll('text')
        .data(nodes)

      u.enter()
        .append('text')
        .text(function(d) {
          return d.name
        })
        .merge(u)
        .attr('x', function(d) {
          return d.x
        })
        .attr('y', function(d) {
          return d.y
        })
        .attr('dy', function(d) {
          return 5
        })

      u.exit().remove()
    }

    function ticked() {
      updateLinks()
      updateNodes()
    }
  </script>
</body>

</html>

关于javascript - 延迟启动力模拟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58665808/

25 4 0
文章推荐： javascript - 如何使 html 文件从 config.js 文件读取值
文章推荐： SQL Server : compare dates by only matching month and day
文章推荐： sql - 替换日期时间日期中的年份
文章推荐： javascript - 为什么在 navigator.geolocation.getCurrentPosition() 为其赋值并返回后无法访问对象中的值？
行者123
个人简介

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

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