D3.js可折叠树：如何实现链接闪烁及节点定时显隐（无需setInterval）

嘿，刚好我对D3的动画机制比较熟悉，给你分享两个完全基于D3自身API的实现方案，完美避开原生setInterval，适配你用的可折叠树场景：

一、链接闪烁（闪光）效果 #

实现思路是利用D3的transition过渡配合递归调用，或者使用D3内置的d3.interval（基于requestAnimationFrame，比原生setInterval更适合动画）来循环切换链接的透明度或样式：

方案1：递归过渡循环（无定时器） #

这种方式完全依赖D3过渡的end事件触发下一轮动画，没有额外定时器：

// 定义链接闪烁函数
function flashLinks() {
  // 选中当前所有链接元素
  d3.selectAll(".link")
    .transition()
    .duration(500) // 半秒过渡到半透明
    .style("opacity", 0.2)
    .transition()
    .duration(500) // 半秒过渡回完全可见
    .style("opacity", 1)
    .on("end", flashLinks); // 过渡结束后递归调用，实现无限循环
}

// 启动闪烁
flashLinks();

方案2：d3.interval控制间隔 #

如果需要更精准的间隔控制，用D3内置的d3.interval（注意这不是原生setInterval）：

// 每1秒触发一次链接透明度切换
d3.interval(() => {
  d3.selectAll(".link")
    .transition()
    .duration(300)
    .style("opacity", function() {
      // 切换当前透明度状态
      return d3.select(this).style("opacity") === "1" ? 0.2 : 1;
    });
}, 1000);

二、节点按固定间隔显示/隐藏 #

同样用D3的过渡机制或d3.interval实现，以下是两种常用方式：

方案1：递归切换+D3 timeout #

function toggleNodes() {
  d3.selectAll(".node")
    .transition()
    .duration(400) // 0.4秒完成显隐过渡
    .style("opacity", function() {
      return d3.select(this).style("opacity") === "1" ? 0 : 1;
    })
    .on("end", () => {
      // 用d3.timeout替代setTimeout，更贴合D3动画机制
      d3.timeout(toggleNodes, 1500); // 切换后等待1.5秒再执行下一次
    });
}

// 启动节点显隐循环
toggleNodes();

方案2：d3.interval状态切换 #

这种方式更清晰，通过变量控制显隐状态：

let nodesVisible = true;
// 每2秒切换一次节点可见性
d3.interval(() => {
  nodesVisible = !nodesVisible;
  d3.selectAll(".node")
    .transition()
    .duration(400)
    .style("opacity", nodesVisible ? 1 : 0);
}, 2000);

注意事项 #

1. 适配可折叠树的更新：因为树折叠/展开时会更新节点和链接，所以动画函数中每次都要重新选择.node和.link（不要缓存选择器），确保只作用于当前存在的元素。
2. 自定义样式：除了透明度，你还可以切换链接的stroke颜色（比如从#ccc到#ff0000）来实现更明显的闪烁效果。
3. 特定节点控制：如果只想让某层级/某类节点显隐，可以在selectAll后加过滤，比如.selectAll(".node").filter(d => d.depth === 1)。

内容的提问来源于stack exchange，提问作者yogi