Agent + AntV 实战：从零构建高交互数据可视化解决方案

1次阅读

没有评论

共计 3649 个字符，预计需要花费 10 分钟才能阅读完成。

在传统的数据可视化开发中，随着交互复杂度的提升，开发者常常会遇到以下问题：

状态爆炸：图表交互（如钻取、筛选、高亮）产生的中间状态难以维护，容易形成嵌套的 useState 或冗余的 Redux store
事件耦合 ：AntV 的图形事件与业务逻辑直接绑定，导致类似onNodeClick 的处理函数越来越臃肿
时序混乱：异步数据加载与用户交互事件竞争，可能产生陈旧的渲染结果

一个典型反例是：当需要实现「点击图表节点→加载详情→高亮关联边」这个流程时，逻辑往往分散在 React 组件、Redux reducer 和 AntV 配置项三个地方。

对比常见状态管理方案在可视化场景的表现：

Redux：
优点：状态变更可追溯
缺点：需要为每个交互动作编写 action/reducer，模板代码过多
MobX：
优点：响应式更新便捷
缺点：细粒度响应可能引发不必要的图表重绘
Agent 模式：
核心思想：将每个可视化实体（如图表、图例、工具栏）建模为自主管理的 Agent
独特优势：
1. 天然匹配可视化场景的「实体 - 行为」模型
2. 通过消息队列处理并发事件
3. 状态变更自动触发局部更新

以 AntV G6 为例，先创建无状态的 React 组件：

interface GraphProps {
  width: number;
  height: number;
  // 注意：不直接传递交互回调
  onAgentEvent?: (msg: AgentMessage) => void; 
}

function GraphCanvas({width, height}: GraphProps) {const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const graph = new G6.Graph({
      container: containerRef.current!,
      width,
      height,
      modes: {default: ['drag-node'] }
    });

    // 事件代理转发
    graph.on('node:click', (evt) => {
      const node = evt.item;
      pubsub.publish('NODE_CLICK', {id: node.getID(),
        model: node.getModel()});
    });

    return () => graph.destroy();
  }, []);

  return <div ref={containerRef} />;
}

定义核心接口与基础 Agent 类：

type AgentID = string;
interface AgentState {
  id: AgentID;
  lastUpdated: number;
}

abstract class BaseAgent<S extends AgentState> {
  private state: S;
  private subscribers: Set<(state: S) => void> = new Set();

  constructor(initialState: S) {
    this.state = initialState;
    this.setupMessageHandlers();}

  // 状态更新触发重绘
  protected updateState(updater: (prev: S) => S) {this.state = updater(this.state);
    this.subscribers.forEach(notify => notify(this.state));
  }

  // 子类实现具体消息处理
  protected abstract handleMessage(
    type: string, 
    payload: unknown
  ): void;

  // 订阅 AntV 原生事件
  private setupMessageHandlers() {pubsub.subscribe((type, payload) => {
      try {this.handleMessage(type, payload);
      } catch (err) {console.error(`Agent 处理消息失败:`, err);
      }
    });
  }
}

以「节点高亮 Agent」为例：

class HighlightAgent extends BaseAgent<HighlightState> {constructor() {
    super({ 
      id: 'highlight',
      highlightedNodes: new Set(),
      lastUpdated: Date.now()});
  }

  protected handleMessage(type: string, payload: any) {switch (type) {
      case 'NODE_CLICK':
        this.updateState(prev => ({
          ...prev,
          highlightedNodes: new Set([payload.id]),
          lastUpdated: Date.now()}));
        break;

      case 'CLEAR_HIGHLIGHT':
        this.updateState(prev => ({
          ...prev,
          highlightedNodes: new Set(),
          lastUpdated: Date.now()}));
    }
  }

  // 供 React 组件订阅状态
  public subscribe(callback: (state: HighlightState) => void) {this.subscribers.add(callback);
    return () => this.subscribers.delete(callback);
  }
}

当节点数量超过 5000 时：

增量更新：

// 在 Agent 中分批处理数据
updateState(prev => {const newData = fetchChunk(prev.loadedCount);
  return {
    ...prev,
    nodes: [...prev.nodes, ...newData],
    loadedCount: prev.loadedCount + newData.length
  };
});

WebWorker 计算：

// 将布局计算移至 Worker
const worker = new Worker('./layout.worker.ts');
worker.postMessage({nodes, edges});
worker.onmessage = (evt) => {
  this.updateState(prev => ({
    ...prev,
    nodes: applyLayout(prev.nodes, evt.data)
  }));
};

每个 Agent 应实现 dispose 方法清理资源
使用 WeakMap 存储图形引用防止内存泄漏
定期检查未使用的 Agent 实例

AntV 的渲染是异步的，直接操作 DOM 可能导致状态不一致。正确做法：

// 错误示例：立即获取图形位置
graph.on('node:click', (evt) => {const pos = evt.item.getBBox(); // 可能得到旧值
});

// 正确做法：在下个 tick 处理
setTimeout(() => {this.updateState(/* ... */);
}, 0);

采用乐观更新 + 版本号校验：

class SyncAgent extends BaseAgent {async handleMessage(type: string, payload: any) {if (type === 'UPDATE_DATA') {
      // 先本地更新
      this.updateState(/* ... */);

      // 后同步服务端
      const res = await api.update(payload);
      if (res.version !== this.state.version) {// 冲突处理}
    }
  }
}

在微前端场景下，可以通过以下方式扩展：

将 Agent 管理提升到主应用，通过 custom event 通信
每个子应用声明自己需要的 Agent 类型
主应用统一调度 Agent 实例的创建与销毁

// 子应用注册
window.registerAgents([{ type: 'highlight', factory: () => new HighlightAgent()}
]);

// 主应用协调
const agent = getAgent('highlight');
agent.subscribe(state => {postMessageToMicroApp('app1', state);
});

通过 Agent 模式组织 AntV 交互逻辑，我们获得了：