1、d3-graphviz绘制函数调用关系图
这个网页实现了以下功能:
- 使用D3-graphviz绘制函数调用关系图
- 支持图表缩放和自适应
- 提供了更新图表的按钮
- 使用DOT语言定义图形结构
- 节点使用不同的颜色和形状进行区分
主要特点:
- 图表可以通过鼠标滚轮进行缩放
- 可以拖动图表以查看不同部分
- 节点使用填充色区分不同类型的函数
- 箭头清晰地显示了函数之间的调用关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Function Call Graph</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-graphviz/5.1.0/d3-graphviz.min.js"></script>
<style>
#graph {
width: 100%;
height: 600px;
border: 1px solid #ccc;
margin: 20px 0;
}
.controls {
margin: 20px;
}
button {
padding: 8px 16px;
margin-right: 10px;
cursor: pointer;
}
</style