Question

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

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

提前致谢

Answer 1

使链接＆＃34;闪烁＆＃34;你想要使用过渡。老实说，setInterval并没有错，实际上我可能会轻松使用它。

首先你想要动画。很难知道你的意思＆＃34;眨眼＆＃34;所以我现在假设变得更亮 - 但你可以随意改变它。

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);

D3JS闪烁链接

1 个答案: