javascript - D3 在转换结束时插入条件

Question

我正在调整以下代码，在每次转换结束时重新绘制一条线。

function tick() {

// push a new data point onto the back
data.push(random());

// redraw the line, and slide it to the left
path
    .attr("d", line)
    .attr("transform", null)
  .transition()
    .duration(500)
    .ease("linear")
    .attr("transform", "translate(" + x(-1) + ",0)")
    .each("end", tick);

// pop the old data point off the front
data.shift();

}

代码来源:https://gist.github.com/mbostock/1642874

但是，我不想在每次转换结束时自动重新调用tick()，而是想检查某个 bool 值(myVar)是否为true，并且只有在这种情况下才重新调用tick()。

我试图写这样的东西，但是tick()函数已经停止被重新调用。有人可以帮我理解出了什么问题吗？谢谢。

function tick() {

// push a new data point onto the back
data.push(random());

myVar = true //for now just hardcoding the value of myVar

// redraw the line, and slide it to the left
path
    .attr("d", line)
    .attr("transform", null)
  .transition()
    .duration(500)
    .ease("linear")
    .attr("transform", "translate(" + x(-1) + ",0)")
    .each("end", function() { if (myVar === true) return tick;});

// pop the old data point off the front
data.shift();

}

注意:新代码改编自 JesperWe 的答案:Invoke a callback at the end of a transition

Answer 1

在您的示例中，您替换 tick 的函数是:

function() { if (myVar === true) return tick;}

但是，D3 不会对该返回值执行任何操作。相反，你应该将其写为:

function() { if (myVar === true) tick();}

因此，当 D3 调用该函数时，您可以在您传递的函数内有条件地自行调用 tick。