个人中心
gpt4 book ai didi

javascript - 如果满足条件，则在另一个转换期间添加并发转换

转载 作者：太空狗 更新时间：2023-10-29 16:09:38 24 4
gpt4 key购买 nike

我正在尝试在过渡运行时添加一个新过渡，条件是如果 bar1 宽度与 bar2 匹配，则条形会改变位置。

我已经使用 transition().tween 来查看是否满足条件。当第二个转换开始时，第一个停止。我希望第一个过渡继续运行直到其持续时间结束，即使第二个过渡已经开始。

我有代码，但无法在第二次转换期间继续第一次转换。请帮忙。

window.i1 = 0;
window.i2 = 0;

var svg = d3.select("body")
   .append("svg")
   .attr("width", 500)
   .attr("height", 500);

var bar1 = svg.append("rect")
   .attr("fill", "green")
   .attr("x", 20)
   .attr("y", 40)
   .attr("height", 20)
   .attr("width", 40)

var bar2 = svg.append("rect")
   .attr("fill", "blue")
   .attr("x", 20)
   .attr("y", 70)
   .attr("height", 20)
   .attr("width", 20)

update();

function update() {
   bar1.transition()
     .ease(d3.easeLinear)
     .duration(2000)
     .attr("width",100)
     .tween("attr.fill", function() {
        var node = this;
        return function(t) {
         window.bar1width = node.getAttribute("width");
         var bl = check();

         if(bl=="true"&&window.i1==0){

            chnPos(); 
           window.i1=window.i1+1;
         }
       }
      })
 

   bar2.transition()
     .ease(d3.easeLinear)
     .duration(2000)
     .attr("width",120)
     .tween("attr.fill", function() {
        var node = this;
        return function(t) {
          window.bar2width = node.getAttribute("width");
          var bl = check();
          if(bl=="true"&&window.i2==0){
          chnPos();
          window.i2=window.i2+1;
        }
       }
      })
    }

function check() {
 if (window.bar2width>=window.bar1width){
   console.log(window.bar1width +' ' + window.bar2width);
   return "true";
 }
 //console.log(true)
return "false";

}

function chnPos(){
    bar1.transition()
      .ease(d3.easeLinear)
      .duration(500)
      .attr("y",70)
    bar2.transition()
      .ease(d3.easeLinear)
      .duration(500)
      .attr("y",40)
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.3.0/d3.min.js"></script>
  </head>
  <body>

      <script type="text/javascript" src="index.js"></script>
      </body>
</html>

最佳答案

在 d3v4+ 中，你可以有多个并发转换，但它们需要有单独的名称:

selection.transition([name]) <>

Returns a new transition on the given selection with the specified name. If a name is not specified, null is used. The new transition is only exclusive with other transitions of the same name. (docs)

让我们为转换添加一些名称，我在下面使用“grow”和“switch”

window.i1 = 0;
window.i2 = 0;

var svg = d3.select("body")
   .append("svg")
   .attr("width", 500)
   .attr("height", 500);


var bar1 = svg.append("rect")
   .attr("fill", "green")
   .attr("x", 20)
   .attr("y", 40)
   .attr("height", 20)
   .attr("width", 40)

var bar2 = svg.append("rect")
   .attr("fill", "blue")
   .attr("x", 20)
   .attr("y", 70)
   .attr("height", 20)
   .attr("width", 20)
   
   update();

function update() {
    bar1.transition("grow")
       .ease(d3.easeLinear)
       .duration(2000)
       .attr("width",100)
       .tween("attr.fill", function() {
         var node = this;
           return function(t) {
             window.bar1width = node.getAttribute("width");
         var bl = check();

         if(bl=="true"&&window.i1==0){

         chnPos(); 
         window.i1=window.i1+1;
      }
    }
  })

  bar2.transition("grow")
    .ease(d3.easeLinear)
    .duration(2000)
    .attr("width",120)
    .tween("attr.fill", function() {
       var node = this;
         return function(t) {
            window.bar2width = node.getAttribute("width");
            var bl = check();
            if(bl=="true"&&window.i2==0){
              chnPos();
              window.i2=window.i2+1;
            }
          }
     })
 }

function check() {
 if (window.bar2width>=window.bar1width){
   //console.log(window.bar1width +' ' + window.bar2width);
   return "true";
 }
 //console.log(true)
return "false";

}

function chnPos(){
bar1.transition("switch")
      .ease(d3.easeLinear)
      .duration(500)
      .attr("y",70)
bar2.transition("switch")
      .ease(d3.easeLinear)
      .duration(500)
      .attr("y",40)

}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.3.0/d3.min.js"></script>
  </head>
  <body>

      <script type="text/javascript" src="index.js"></script>
      </body>
</html>

我只想补充一点，这可能会稍微简化一些——因为为每个元素单独创建过渡的方法会引入很多额外的代码。每增加一个条，代码的复杂性也会增加一些。在长度转换期间，您应该能够使用绑定(bind)数据和一些排序来重新排序具有转换的元素。也许是这样的(这是一个粗略的片段，肯定有更好的方法):

var data = [
 { start:200, current: 200, end: 40 },
 { start:120, current: 120, end: 240 },
 { start:10, current: 10, end: 260 }
];
var colors =["crimson","steelblue","lawngreen","orange"];

var svg = d3.select("body")
   .append("svg")
   .attr("width", 500)
   .attr("height", 500);
   
var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 20)
  .attr("y", function(d,i) { return i*30+20; })
  .attr("width", function(d) { return d.start; })
  .attr("height", 20)
  .attr("fill",function(d,i) { return colors[i]; })
  .on("click", order);


 
bars.transition("length")
  .attr("width", function(d) { return d.end; })
  .tween("attr.current", function(d,i) {
    var bar = d3.select(this);
	  var that = this;
    return function() { 
      d.current = +bar.attr("width");
      bars = bars.sort(function(a,b) { 
        return b.current - a.current; 
      }).order();
	  // trigger new transition if needed:
	  var nodes = bars.nodes();
	  if(nodes[i] != that) {
	     for(var j = 0; j < nodes.length; j++) {
		   if(nodes[j] == that) { i=j; break;}
		 }
	     order();
      }
    }
  })
  .duration(4000);

function order(bar) {
  bars.transition("order")
    .attr("y", function(d,i) { return i*30+20; })
	//.ease(d3.easeLinear)
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.3.0/d3.min.js"></script>
  </head>
  <body>

      <script type="text/javascript" src="index.js"></script>
      </body>
</html>

为了进一步解释，我将分解第二个片段的主要转换:

// Transition each bar's width/length:
bars.transition("length")

  // set the final width value:
  .attr("width", function(d) { return d.end; })

  // Modify the datum throughout the transition
  // This function is called once for each element
  // This means we need to update d,i manually during the transition
  .tween("attr.current", function(d,i) {

    // Keep track of an individual bar being transitioned (element & selection):
    var bar = d3.select(this);
    var that = this;

    // This function is invoked each tick for each bar:
    return function() { 
      // Update a bar's datum to reflect current width: 
      d.current = +bar.attr("width");
      // Sort the bars based on current width:
      bars = bars.sort(function(a,b) { 
        return b.current - a.current; 
      })
      .order(); // Pull up the longest bar so it is drawn last (if there is overlap, it will be on top)

      // trigger new transition if needed:
      // Has the bar being transitioned been moved in the selection? 
      // If so, nodes[i] will not equal the element being moved (that)
      var nodes = bars.nodes();
      if(nodes[i] != that) {
         // If it has been moved, update i to reflect the element's new index
         for(var j = 0; j < nodes.length; j++) {
           if(nodes[j] == that) { i=j; break;}
         }
         // And apply the transition on the vertical spacing:
         order();
      }
    }
  })
  .duration(4000);

如果不检查节点顺序是否已更改，将重复触发第二个转换，取代之前的第二个转换。默认使用 d3.easeCubic 会导致最明显的后果:过渡开始很慢。如果不断地重新启动第二个转换，则在第一个转换完成之前，第二个转换将永远不会移动得非常快。这也可能是上述代码片段的问题，但前提是快速连续地进行大量位置更改。

关于javascript - 如果满足条件，则在另一个转换期间添加并发转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55559397/

24 4 0
文章推荐： html - 在 html 中再次播放视频后循环播放 html5 视频变黑屏
文章推荐： c - 实现 TRIE 数据结构
文章推荐： c - 从 .h 文件中删除未使用的函数原型(prototype)
文章推荐： javascript - 元素类中的 CSS @media - 使用 CSS 变量
太空狗
个人简介

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

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