基于SVG的JavaScript定时气泡绘制与交互实现方案咨询

• 原生SVG + 纯JS：最适配你的场景。因为原图本身是SVG，直接操作SVG DOM元素最直观，无需额外引入库，交互逻辑简单直接，性能也能应对常规复杂度的场景。
• D3.js：如果后续需要处理大量数据绑定、复杂可视化逻辑（比如动态数据更新、多维度交互），可以选择它，能更高效地把数据和SVG元素关联起来。
• Canvas：不推荐，SVG是矢量图，用Canvas需要重绘所有元素，交互事件处理也比SVG麻烦得多。
• GeoJSON：这是数据格式而非绘制技术，只有当你的方块属于地理空间数据时才需要用到，普通矩形场景没必要。

假设你的SVG结构如下（提前给每个矩形添加唯一ID，方便获取）：

<svg id="map-svg" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- 示例方块 -->
  <rect id="block-1" x="50" y="50" width="80" height="80" fill="#ccc" />
  <rect id="block-2" x="150" y="50" width="80" height="80" fill="#ccc" />
  <rect id="block-3" x="250" y="50" width="80" height="80" fill="#ccc" />
</svg>

对应的JavaScript代码：

// 1. 收集所有方块的标识和关联信息
const blocks = [
  { id: 'block-1', text: '气泡1', detail: '方块1的详细信息' },
  { id: 'block-2', text: '气泡2', detail: '方块2的详细信息' },
  { id: 'block-3', text: '气泡3', detail: '方块3的详细信息' }
];

const svg = document.getElementById('map-svg');
let currentIndex = 0;

// 2. 创建气泡的工具函数
function createBubble(block) {
  const rect = document.getElementById(block.id);
  // 计算方块的中心坐标
  const rectX = parseFloat(rect.getAttribute('x'));
  const rectY = parseFloat(rect.getAttribute('y'));
  const rectWidth = parseFloat(rect.getAttribute('width'));
  const rectHeight = parseFloat(rect.getAttribute('height'));
  const centerX = rectX + rectWidth / 2;
  const centerY = rectY + rectHeight / 2;

  // 创建气泡容器组
  const bubbleGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  bubbleGroup.setAttribute('class', 'bubble-group');

  // 绘制气泡圆形
  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  circle.setAttribute('cx', centerX);
  circle.setAttribute('cy', centerY - 30); // 气泡悬浮在方块上方
  circle.setAttribute('r', 25);
  circle.setAttribute('fill', '#4285F4');
  circle.setAttribute('cursor', 'pointer');

  // 绘制气泡内的文本
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  text.setAttribute('x', centerX);
  text.setAttribute('y', centerY - 26);
  text.setAttribute('text-anchor', 'middle');
  text.setAttribute('fill', 'white');
  text.setAttribute('font-size', '14px');
  text.textContent = block.text;

  // 绑定点击弹窗事件
  bubbleGroup.addEventListener('click', () => {
    alert(block.detail); // 此处可替换为自定义弹窗组件
  });

  // 组装气泡并添加到SVG中
  bubbleGroup.appendChild(circle);
  bubbleGroup.appendChild(text);
  svg.appendChild(bubbleGroup);
}

// 3. 定时器逐个生成气泡
const timer = setInterval(() => {
  if (currentIndex >= blocks.length) {
    clearInterval(timer);
    return;
  }
  createBubble(blocks[currentIndex]);
  currentIndex++;
}, 10000); // 每隔10秒创建一个气泡

先引入D3库：

<script src="https://d3js.org/d3.v7.min.js"></script>

SVG结构与原生示例一致，对应的JavaScript代码：

// 绑定方块数据
const blocksData = [
  { id: 'block-1', x: 50, y: 50, width: 80, height: 80, text: '气泡1', detail: '方块1详情' },
  { id: 'block-2', x: 150, y: 50, width: 80, height: 80, text: '气泡2', detail: '方块2详情' },
  { id: 'block-3', x: 250, y: 50, width: 80, height: 80, text: '气泡3', detail: '方块3详情' }
];

const svg = d3.select('#map-svg');
let index = 0;

// 添加气泡的函数
function addBubble(data) {
  const bubbleGroup = svg.append('g').attr('class', 'bubble-group');
  
  const centerX = data.x + data.width / 2;
  const centerY = data.y + data.height / 2;

  // 绘制气泡圆形
  bubbleGroup.append('circle')
    .attr('cx', centerX)
    .attr('cy', centerY - 30)
    .attr('r', 25)
    .attr('fill', '#4285F4')
    .style('cursor', 'pointer');

  // 绘制气泡文本
  bubbleGroup.append('text')
    .attr('x', centerX)
    .attr('y', centerY - 26)
    .attr('text-anchor', 'middle')
    .attr('fill', 'white')
    .attr('font-size', '14px')
    .text(data.text);

  // 绑定点击弹窗事件
  bubbleGroup.on('click', () => {
    alert(data.detail);
  });
}

// 定时器逻辑
const interval = setInterval(() => {
  if (index >= blocksData.length) {
    clearInterval(interval);
    return;
  }
  addBubble(blocksData[index]);
  index++;
}, 10000);

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