javascript - D3JS闪烁链接

Question

我正在使用 d3js 可折叠树。 https://bl.ocks.org/mbostock/4339083

如何让链接闪烁(flash)？节点也可以定期显示/隐藏吗？我希望它可以在不使用setInterval的情况下完成。

提前致谢

Answer 1

要使链接“闪烁”，您需要使用过渡。老实说，setInterval 没有任何问题，事实上我可能会为了方便而使用它。

首先你想要动画。很难知道“眨眼”是什么意思，所以我假设现在会变得更亮 - 但您可以根据需要进行更改。

d3.select("svg")
  .selectAll(".link")
  .transition()
  .duration(500) // miliseconds
  .style("stroke", "white"); 

这将在 500 毫秒的时间内逐渐将样式更改为白色。现在您需要将颜色恢复为原始颜色。您可以使用转换对象上的 end 事件来执行此操作。

.on("end", function() {
   d3.select(this).style("stroke", "#CCC");
});

请注意，上面的 this 是运行转换的 HTMLElement。如果需要，您可以使用 lambda(箭头函数)来完成此操作，但您需要执行 (d, i, elements) => d3.select(elements[i]);

现在你已经完成了重置的过渡。但你想定期调用它。老实说，最简单的方法是使用 setInterval ...所以你的最终代码将如下所示:

// Create the regular interval
setInterval(() => {
    d3.select("svg")
      .selectAll(".link")
      .transition()
      .duration(500) // miliseconds
      .style("stroke", "white")
      .on("end", function() {
          d3.select(this).style("stroke", "#CCC");
      });

}, 1000);