MCP D3 Server

🚀 D3 数据可视化 MCP 服务器

这是一个基于 TypeScript 和 Express 的 D3.js 模型上下文协议（MCP）服务器。该服务器借助 MCP 协议，提供 D3 可视化文档、图表推荐和代码生成等实用功能。

✨ 主要特性

• 📊 D3 资源：可访问 D3 文档和示例资源。
• 🔍 图表推荐：能依据数据和目标，给出合适的图表类型建议。
• 💻 代码生成：可为各种图表类型生成 D3 代码示例。
• 🔌 MCP 集成：可直接将 AI 工具连接到 D3 知识库。

📦 安装指南

先决条件

• Node.js 16.x 或更高版本
• npm 或 yarn 包管理工具

安装步骤

1. 克隆仓库

git clone https://github.com/iamfiscus/mcp-d3-server.git
cd mcp-d3-server

2. 安装依赖项

npm install

3. 构建项目

npm run build

💻 使用示例

启动服务器

npm start

服务器将在 http://localhost:3000（或 .env 文件中指定的 PORT）运行。使用 MCP 端点连接到 http://localhost:3000/mcp-sse。

开发模式

使用热重载进行开发：

npm run dev

可用的 MCP 资源和工具

资源

• d3-docs://{topic}：访问特定主题的 D3 文档。
• d3-charts://{chartType}：获取具体图表类型的详细信息。

工具

• generate-d3-chart：为不同图表类型生成 D3 代码示例。
  • 参数：chartType（图表类型）、dataFormat（数据格式）、features（可选功能参数）。
• recommend-chart：根据数据和目标推荐合适的图表类型。
  • 参数：dataDescription（数据描述）、purpose（使用目的）。

MCP 客户端连接示例

import { McpClient } from "@modelcontextprotocol/sdk/client/mcp.js";
import { SseClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

// 创建 MCP 客户端实例
const client = new McpClient();

// 连接到 D3 MCP 服务器
const transport = new SseClientTransport("http://localhost:3000/sse");
await client.connect(transport);

// 获取图表推荐结果
const result = await client.invokeTool("recommend-chart", {
  dataDescription: "过去两年五个产品类别的月度销售额数据",
  purpose: "展示趋势并比较各类别之间的性能"
});

console.log(result.content[0].text);

📄 许可证

本项目采用 MIT 协议。

🤝 贡献指南

欢迎任何形式的贡献！请随时提交 Pull Request。