d3.js - D3v4 - 在 ("end"上)在 transition.duration 结束之前调用

Question

我想通过不同的数据集进行转换，并认为以下方法可行:

function next(keyIndex)
{
    if(keyIndex < 3)
    {
        d3.selectAll(".dot")
           .data(dataForKey(keyIndex))
           .transition().duration(3000)
           .call(position)
           .on("end", next(keyIndex+1));
    }
}

但 .on("end") call 在 duration(3000) 之前被调用完成因此数据基本上从第一个数据集过渡到最后一个数据集。
有没有办法从 dataset[0] -> dataset[1] -> dataset[2] 正确过渡?

Answer 1

您的主要问题是，您没有为 .on("end",...) 提供适当的回调函数。 .当像 .on("end", next(keyIndex+1)) 一样调用它时，它不会按预期工作，因为语句 next(keyIndex+1)将立即执行，从而在上一步结束之前开始下一个迭代步骤。在下一步中，刚刚开始的过渡将被取消并被新的过渡取代。这样，您将不会有具有指定持续时间的一系列转换，而是一些中断的转换紧随其后的是最后一个未中断的转换，这将一直转换为最终值。

解决方案是将您的电话转至 next()在函数表达式中提供真正的回调，当结束事件触发时将调用该回调。

function next(keyIndex) {
  if(keyIndex < 3) {
    d3.selectAll(".dot")
      .data(dataForKey(keyIndex))
      .transition().duration(3000)
      .call(position)
      .on("end", function() { next(keyIndex+1) });  // use a function wrapper
  }
}

对于工作演示，请查看以下代码段:

   var svg = d3.select("svg"),
    margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var xScale = d3.scaleLinear().domain([0, 10]).range([0, width]),
    yScale = d3.scaleLinear().domain([0, 10]).range([height, 0]);

    var xAxis = d3.axisBottom().scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.axisLeft().scale(yScale);
    
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
         
    // inital draw
    var dot = svg.append("g")
      .attr("class", "dots")
    .selectAll(".dot")
      .data(dataForKey(1))
    .enter().append("circle")
      .attr("class", "dot")
      .style("fill", "#000000")
	  .attr("cx", function(d) { return xScale(d.x); })
        .attr("cy", function(d) { return yScale(d.y); })
        .attr("r", function(d) { return 5; });
        
    // updated Data
    next(1);
    
    function dataForKey(key)
    {
    	return [{x:key, y:key}];
    }
    
    function next(keyIndex) {
      if (keyIndex < 10) {
        d3.selectAll(".dot")
          .data(dataForKey(keyIndex))
          .transition().duration(3000)
					.attr("cx", function(d) { return xScale(d.x); })
          .attr("cy", function(d) { return yScale(d.y); })
          .on("end", function() { next(keyIndex + 1) });
      }
    }

<script src="https://d3js.org/d3.v4.js"></script>

<svg width="300" height="300"></svg>