如何用关键帧动画实现D3.js饼图扇区闪烁并保留原始颜色

有两种可行方法实现扇区在红色和原始颜色间闪烁，以下是具体步骤：

方法一：使用CSS自定义属性（推荐） #

通过CSS变量存储原始颜色，让动画动态读取该值实现颜色切换，简洁且性能更优。

1. 在D3代码中为目标扇区设置CSS变量
   给需要闪烁的扇区添加blink类的同时，将它的原始填充色存入自定义CSS变量--original-fill：

// 假设你已获取饼图扇区的选择器，可根据数据筛选目标扇区
d3.selectAll(".pie-slice")
  .filter(function(d) {
    return d.data.value === 你的筛选条件; // 替换为实际筛选逻辑
  })
  .classed("blink", true)
  .style("--original-fill", function() {
    return d3.select(this).style("fill"); // 获取当前扇区的原始填充色
  });

2. 修改CSS动画代码
   将@keyframes里的白色替换为自定义变量，动画就会在红色和原始颜色间切换：

.blink{
  animation: blinking 1s infinite;
}

@keyframes blinking {
  0%, 50% { fill: red; }
  51%, 100% { fill: var(--original-fill); }
}

方法二：使用D3过渡动画 #

若不想依赖CSS变量，可通过D3的过渡API实现循环闪烁：

1. 存储原始颜色到元素属性
   给目标扇区添加数据属性，保存它的原始填充色：

const targetSlice = d3.selectAll(".pie-slice")
  .filter(function(d) {
    return d.data.value === 你的筛选条件; // 替换为实际筛选逻辑
  })
  .attr("data-original-fill", function() {
    return d3.select(this).style("fill");
  });

2. 编写循环闪烁函数
   通过transition()实现颜色交替，动画结束后递归调用自身形成循环：

function blink(slice) {
  slice.transition()
    .duration(500)
    .style("fill", "red")
    .transition()
    .duration(500)
    .style("fill", function() {
      return d3.select(this).attr("data-original-fill");
    })
    .on("end", function() {
      blink(d3.select(this));
    });
}

// 启动闪烁效果
blink(targetSlice);

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