过渡、动画与交互

D3.js 的过渡 (Transitions) 和交互 (Interactions) 是它处理动态内容并提供卓越用户体验的核心所在。

过渡与动画

D3 的过渡通常是通过 .transition() 方法启动的。

使用 .transition()

过渡允许您在一系列属性之间进行平滑的转换。

d3.selectAll("circle")
  .transition() // 开始过渡
  .duration(1000) // 设置持续时间为 1000 毫秒
  .delay(500) // 设置延迟时间为 500 毫秒
  .attr("r", 100) // 平滑改变半径
  .style("fill", "blue"); // 平滑改变填充颜色

控制动画速度：缓动函数 (Easing)

D3 提供了许多缓动函数供您选择：

• d3.easeLinear: 线性匀速。
• d3.easeBounce: 弹跳效果。
• d3.easeElastic: 弹性效果。
• d3.easeCubic: 立方缓动（默认）。

d3.selectAll("circle")
  .transition()
  .ease(d3.easeBounce) // 设置弹跳效果
  .attr("cy", 200);

链式过渡

您可以使用链式操作创建一系列连续的动画。

d3.selectAll("circle")
  .transition()
  .duration(500)
  .attr("r", 50)
  .transition() // 第二个过渡开始
  .duration(500)
  .attr("r", 100);

交互与事件

D3 支持标准的 DOM 事件，如 click, mouseover, mouseout, mousemove 等。

绑定事件：.on() 方法

d3.selectAll("rect")
  .on("mouseover", function(event, d) {
    // 鼠标经过时变色
    d3.select(this)
      .style("fill", "orange");
    
    // 打印绑定到此元素的数据
    console.log("数据是:", d);
  })
  .on("mouseout", function(event, d) {
    // 鼠标离开时恢复原色
    d3.select(this)
      .style("fill", "steelblue");
  })
  .on("click", (event, d) => {
    // 处理点击事件
    alert(`您点击的数值是: ${d}`);
  });

鼠标悬停示例：提示框

提示框是交互式图表中最常见的组件之一。

const tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

d3.selectAll("rect")
  .on("mouseover", (event, d) => {
    tooltip.transition()
      .duration(200)
      .style("opacity", 0.9);
    tooltip.html(`数值: ${d}`)
      .style("left", (event.pageX) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  .on("mouseout", (event, d) => {
    tooltip.transition()
      .duration(500)
      .style("opacity", 0);
  });

掌握了过渡和交互，您就能让枯燥的数据真正“活”起来，为用户提供流畅且富有表现力的可视化体验。