D3:事件功能具有串联过渡

Question

我的代码如下：

selection.
    .transition()
    .delay(1000)
    .each("start",f1)
    ...
    .transition()
    .delay(2000)
    .each("start",f2)
    ...
    .transition()
    .delay(3000)
    .each("start",f3)
    ...

功能f1，f2和f3更改页面中某些DOM元素的外观。

我需要运行函数f1，f2，f3当过渡开始产生效果时，即在延迟指定的时间之后。

，但是首先，我需要运行功能f1，f2和f3。

相反，在我看来，f3在f1和f2之后立即执行，因此它隐藏了他们的DOM更改。

做什么正确的事情？

Answer 1

如果您的函数一次和全部运行而不考虑听众，则可能是因为您在附加侦听器时将括号放在函数之后：

.each('start',function());

虽然您没有在问题中指出这一点，但您可能将它们排除在一个更干净的问题中。

如果您需要将参数传递到函数，则需要实际编写一个内联函数才能调用您的函数：

.each('start', function() { functionName(param1,param2); })

即使括号也不是麻烦的根源，我希望以下示例可能会有所帮助。

我在答案中使用了d3.js v4：在这里使用.on方法，而不是.each

当我使用持续时间而不是延迟时，答案仍然适用于我的简短测试。

---

摘要：

基于您的问题的示例（假设括号是头痛的原因）：

var svg = d3.select('body').append('svg').attr('width',400).attr('height',200);
var data = [4,12,4,12,4,12,4];
svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d,i) { return 40 + (i * 20); })
  .attr('cy', 50)
  .attr('r', function(d) { return d; })
  .attr('fill','black');
  
svg.selectAll('circle')
  // Transition 1
  .transition()
  .attr('r', function(d) { return (d == 4) ? 10 : 4; })
  .duration(3000)
  .on('start', s1() )
  .on('end', e1() )
  // Transition 2
  .transition()
  .attr('fill', function(d) { return (d == 4) ? "steelblue" : "orange"; })
  .duration(3000)
  .on('start', s2() )
  .on('end', e2() )
  
  // Transition 3
  .transition()
  .attr('cy', function(d,i) { return (d==4) ? 30:60; })
  .attr('r', function(d) { return (d == 4) ? 14 : 18; })
  .duration(3000)
  .on('start', s3() )
  .on('end', e3() )
  ;
  
  function s1() {  console.log("Transition 1 Start");  }
  function s2() {  console.log("Transition 2 Start");  }
  function s3() {  console.log("Transition 3 Start");  }
  function e1() {  console.log("Transition 1 End");    }
  function e2() {  console.log("Transition 2 End");    }  
  function e3() {  console.log("Transition 3 End");    }

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

所有函数一次触发，它们一次触发一次。

---

卸下括号将为您提供：

var svg = d3.select('body').append('svg').attr('width',400).attr('height',200);
var data = [4,12,4,12,4,12,4];
svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d,i) { return 40 + (i * 20); })
  .attr('cy', 50)
  .attr('r', function(d) { return d; })
  .attr('fill','black');
  
svg.selectAll('circle')
  // Transition 1
  .transition()
  .attr('r', function(d) { return (d == 4) ? 10 : 4; })
  .duration(3000)
  .on('start', s1 )
  .on('end', e1 )
  // Transition 2
  .transition()
  .attr('fill', function(d) { return (d == 4) ? "steelblue" : "orange"; })
  .duration(3000)
  .on('start', s2 )
  .on('end', e2 )
  
  // Transition 3
  .transition()
  .attr('cy', function(d,i) { return (d==4) ? 30:60; })
  .attr('r', function(d) { return (d == 4) ? 14 : 18; })
  .duration(3000)
  .on('start', s3 )
  .on('end', e3 )
  ;
  
  function s1() {  console.log("Transition 1 Start");  }
  function s2() {  console.log("Transition 2 Start");  }
  function s3() {  console.log("Transition 3 Start");  }
  function e1() {  console.log("Transition 1 End");    }
  function e2() {  console.log("Transition 2 End");    }  
  function e3() {  console.log("Transition 3 End");    }

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

没有选择的过渡，每个元素都是单独过渡的，从而导致多个呼叫对每个函数（可能需要这，我不确定是否在您的情况下）。

---

如果您想一次触发每个函数，则需要计算有多少元素完成过渡（我已经为下面的最终事件完成了此操作）。或者，如果您有信心所有过渡几乎可以同时完成，则可以通过使用if语句触发事件的if语句启动或结束时调用一次函数（我对下面的开始事件都这样做）：

var svg = d3.select('body').append('svg').attr('width',400).attr('height',200);
var data = [4,12,4,12,4,12,4];
svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d,i) { return 40 + (i * 20); })
  .attr('cy', 50)
  .attr('r', function(d) { return d; })
  .attr('fill','black');
  
var n = 6;
var m = 6;
svg.selectAll('circle')
  // Transition 1
  .transition()
  .on('start',function(d,i) { if (i == 6) { log('transition 1 started'); } })
  .on('end',function(d,i) { if(--m == 0) { m = 6; log('transition 1 ended'); } })
  .attr('r', function(d) { return (d == 4) ? 10 : 4; })
  .duration(3000)
  // Transition 2
  .transition()
  .on('start',function(d,i) { if (i == 6) { log('transition 2 started'); } })
  .on('end',function(d,i) { if(--m == 0) { m = 6; log('transition 2 ended'); } })
  .attr('fill', function(d) { return (d == 4) ? "steelblue" : "orange"; })
  .duration(3000)
  
  // Transition 3
  .transition()
  .on('start',function(d,i) { if (i == 6) { log('transition 3 started'); } })
  .on('end',function(d,i) { if(--m == 0) { m = 6; log('transition 3 ended'); } })
  .attr('cy', function(d,i) { return (d==4) ? 30:60; })
  .attr('r', function(d) { return (d == 4) ? 14 : 18; })
  .duration(3000)
  ;
  
  function log(string) {
    console.log(string);
  }

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.js"></script>