Question

我有一个使用D3运行两部分链式转换的函数。对于转换的初始运行，我希望第一部分快速执行。实际上，我设置的持续时间为0毫秒。

所以，我有类似的东西：

t0 = selection.transition().duration(0)

我将转换的第二部分设置为运行更长时间，例如：

t0.transition().duration(2000)

我的问题：当转换的第一部分持续时间为0时，它会被中断（可能是转换的第二部分）并且不会运行。

将第一次转换的持续时间设置为500ms可以解决问题。

这里发生了什么？是否无法为每个子过渡设置不同的持续时间？

注意：我意识到我可以在没有转换的情况下初始化正确的起始值，但是看到这种行为让我想知道我是否没有正确使用链式转换。

以下示例：

＆＃13;

var DAT=[];

for(var i=0; i<10; i++){DAT.push(i)}

var rects = d3.select("svg").selectAll("rect").data(DAT);
rects.enter().append("rect");
rects.attr({x:0,y:0,height:10,width:0,fill:"red",stroke:"none"});

var XPOS = 100;
var DURATION = 0; //first transition runs with a duration of 0

function GO(){
    var status0 = d3.select("#t0").text("NOT COMPLETE");
    var status1 = d3.select("#t1").text("NOT COMPLETE");
    var t0 = rects.transition().duration(DURATION).attr("x",XPOS)
        .each("end",function(d,i){
            if(i===9){status0.text("COMPLETE")}
        });
    t0.transition().duration(2000)
      .attr("y",function(d,i){return i*15})
      .attr("width",function(d,i){return Math.random()*300})
      .each("end",function(d,i){
          if(i===9){status1.text("COMPLETE")}
      });
}

GO();

d3.select("#button0").on("mousedown",function(){
    var node = d3.select("input").node();
    var dur = node.value;
    if(dur==="" || dur===null || typeof dur==="undefinded" || isNaN(dur)){
      dur = 0;
      node.value = dur;
    }
    XPOS = Math.random()*100 + 50;
    DURATION = dur; //set duration to 500
    GO(); //re-run transition
});

d3.select("#button1").on("mousedown",function(){
    XPOS = Math.random()*100 + 50;
    DURATION = 500; //set duration to 500
    GO(); //re-run transition
});

d3.select("input").on("mousedown",function(){d3.event.stopPropagation()})

＆＃13;

p, h1{font-family:arial,Helvetica,sans}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<h1>Example of problem with chained transitions</h1>
<p>When run with a duration of 0, the first transition (that shifts all bars right) is interrupted and does not run. The second part of the transition runs successfully</p>
<p>After changing the duration of the first transition to 500ms, both parts of the transition run successfully. Press "Redraw" buttons to demonstrate.</p>
<div id="button0" style="width:350px;height:auto;padding:5px 5px 15px 5px;border:1px solid red;border-radius:10px;fill:#ffffff;cursor:pointer; margin:0px;">
  <p style="text-align:center;pointer-events:none;color:red">Redraw with first transition duration of</p> 
  <input style="float:left;margin-left:34%;width:10%;padding:0px 5px 0px 5px;" value=0 />
  <p style="float:left;color:red;margin:2px 0px 0px 5px;"> milliseconds</p>
  <div style="width:0px;clear:both;position:relative;"></div>
</div>
<div id="button1" style="width:350px;height:auto;padding:5px;border:1px solid red;border-radius:10px;fill:#ffffff;cursor:pointer; margin:0px;margin-top:5px;">
    <p style="text-align:center;pointer-events:none;color:red">Redraw with first transition duration of 500ms</p>
</div>
<svg style="width:500px;height:150px;margin-top:15px;">
    
</svg>

<p>Transition 0: <span id="t0"></span></p>
<p>Transition 1: <span id="t1"></span></p>

＆＃13;

D3中的两个链式转换中的第一个被中断并且无法运行

0 个答案: