D3.js关系图可视化Demo
d3.js 的关系图 demo，挺适合入门和小型项目练练手的。项目用的是SVG配合广度优先排序，节点排布还挺整齐，逻辑清晰，适合用来看清楚数据之间的连接关系。
index.html里直接写了 JS 和结构，打开浏览器就能跑起来，响应也快，不依赖太多东西。
数据和图形是完全分离的，用一个data.json装节点和边，D3 那边一绑定，关系图就出来了。你可以随便换个数据试试效果，改完不用重构逻辑，挺方便。
图里的节点和线条用的都是circle、line这类 SVG 元素，样式在style.css里定义得直白，比如stroke设置连线颜色、fill定义节点颜色，想换风格的话直接改 CSS 就行。
布局算法用的是广度优先，也就是从根节点一圈一圈往外排，看起来就比较规整，不会乱糟糟的。如果你关系图层级比较，这种排法还挺合适的。
交互这块也有做一些基础的，比如鼠标悬停显示信息、点击高亮节点之类的。想加点复杂交互也容易扩展，D3 事件绑定本来就挺灵活。
如果你刚开始玩 D3，想搞个可交互的关系图，这份 demo 可以说是个不错的起点。结构清晰、代码不多，改起来没啥负担。
文件大小：1.14MB
评论区