D3JS闪烁链接

Posted 2021-03-30

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

如何使链接闪烁（闪烁）？节点也可以定期显示/隐藏吗？我希望不使用setInterval就可以完成。

提前致谢

答案

要使链接“闪烁”，您将需要使用转换。老实说，setInterval没有任何问题，事实上我可能会轻松使用它。

首先你想要动画。通过“眨眼”很难知道你的意思，所以我现在假设它会变得更亮 - 但是你可以根据自己的意愿改变它。

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

这将在500毫秒的时间内逐渐改变为white的风格。现在您需要将颜色还原为原始颜色。您可以使用过渡对象上的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);