如果满足条件，则在另一个过渡期间添加一个并发过渡

时间：2019-04-07 13:14:12

标签： javascript html css d3.js

我正在尝试在过渡运行时添加一个新过渡，条件是如果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>

1 个答案:

答案 0 :(得分：2)

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

  

selection.transition（[name]）<>

     

使用指定的值返回给定选择的新过渡   名称。如果未指定名称，则使用null。新的过渡是   仅与同名的其他转换互斥。 （docs）

让我们为过渡添加一些名称，我在下面使用“增长”和“切换” 

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>

我要补充一点，这可能可以简化一些-因为为每个元素单独创建过渡的方法会引入很多额外的代码。代码的复杂性还增加了每个附加栏的数量。您应该能够使用绑定数据和一些排序来在长度转换期间对具有转换的元素进行重新排序。也许类似（这是一个粗略的片段，肯定有更好的方法）：

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会导致此结果最明显的结果：过渡开始很慢。如果不断重启第二个转换，则第二个转换将永远不会非常快地移动，直到第一个转换完成。以上片段也可能是一个问题，但前提是快速接班中发生了很多位置变化。

相关问题
最新问题