# d3-graph-with-thumbnail

**Repository Path**: holdCoder/d3-graph-with-thumbnail

## Basic Information

- **Project Name**: d3-graph-with-thumbnail
- **Description**: 基于d3.js的simulation力导图，canvas实现的带缩略图的关系图谱案例
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://zhixiaotong.github.io/demo-online/example/thumbnail
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2025-12-25
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# d3-graph-with-thumbnail
<img src="https://camo.githubusercontent.com/890acbdcb87868b382af9a4b1fac507b9659d9bf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667" alt="" data-canonical-src="https://img.shields.io/badge/license-MIT-blue.svg" style="max-width:100%;">


> d3 graph using canvas with thumbnail

## description

> 基于d3.js的simulation力导图，canvas实现的带缩略图的关系图谱案例

> 在线演示Demo采用vue框架开发,基于vue cli版本(version：3.8.2)脚手架搭建，核心代码为原生js，可用于任何js框架中。

> 网上鲜有基于canvas的缩略图案例，因此放上来做一个记录，代码中还包含一些canvas性能优化的方式。给有需求的朋友帮助，与君共勉。

> 本案例遵从MIT协议，请认准[http://www.github.com/zhixiaotong]
  如果该案例对你有所启发或帮助，请留下你的小心心！！！

## 在线预览：
https://zhixiaotong.github.io/demo-online/example/thumbnail

## 安装项目依赖
```
npm install
```

### 本地开发者模式运行
```
npm run serve
```

### 线上模式打包运行
```
npm run build
```

### 执行测试
```
npm run test
```

### 提示和修复文件
```
npm run lint
```

### 自定义配置
请参考 [Configuration Reference](https://cli.vuejs.org/config/).