Lab 8 · 交互

HTML select 配合 D3 数据更新实现筛选：

<select id='category-select'>
  <option value='all'>全部</option>
  <option value='A'>类别 A</option>
</select>
<div id='chart'></div>

d3.select('#category-select').on('change', function() {
  currentCategory = this.value;
  updateChart();
});

function updateChart() {
  const filtered = (currentCategory === 'all')
    ? data
    : data.filter(d => d.category === currentCategory);

  svg.selectAll('circle')
    .data(filtered)
    .join('circle')
    .transition().duration(300)...
}

Tooltip 是最重要的交互形式之一：

const tooltip = d3.select('body').append('div')
  .style('position', 'absolute')
  .style('background', 'rgba(30,30,30,0.9)')
  .style('color', '#fff')
  .style('padding', '10px 14px')
  .style('border-radius', '6px')
  .style('font-size', '13px')
  .style('pointer-events', 'none')
  .style('opacity', 0).style('z-index', 1000);

circles
  .on('mouseover', (event, d) => {
    tooltip.style('opacity', 1)
      .html(`<strong>${d.name}</strong><br>${d.value}`)
      .style('left', (event.pageX + 15) + 'px')
      .style('top',  (event.pageY - 10) + 'px');
  })
  .on('mousemove', (event) => {
    tooltip
      .style('left', (event.pageX + 15) + 'px')
      .style('top',  (event.pageY - 10) + 'px');
  })
  .on('mouseout', () => {
    tooltip.transition().duration(200).style('opacity', 0);
  });

d3.interval() 用于定时任务（如地图旋转、实时数据刷新）：

// 地图持续旋转（~15 FPS）
let rotation = 0;
d3.interval(() => {
  rotation += 0.3;
  projection.rotate([rotation, 0]);
  svg.selectAll('path').attr('d', geoPath);
}, 66);

// 暂停/恢复
const timer = d3.interval(() => { ... }, 66);
timer.stop();
timer.restart(callback, 66);

// 启动时只执行一次用 d3.timeout
d3.timeout(() => {
  renderChart();
}, 100);

注意：动画放在最后阶段再加，优先确保交互基本功能正常。