d3实现雷达辐射树状图表效果
代码语言:html
所属分类:图表
代码描述:d3实现雷达辐射树状图表效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } </style> </head> <body translate="no"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script> <script > var pubs = { "name": "AUT-1", "children": [ { "name": "PUB-1", "children": [ { "name": "AUT-11", "children": [ { "name": "AFF-111" }, { "name": "AFF-112" }] }, { "name": "AUT-12", "children": [ { "name": "AFF-121" }] }, { "name": "AUT-13", "children": [ { "name": "AFF-131" }, { "name": "AFF-132" }] }, { "name": "AUT-14", "children": [ { "name": "AFF-141" }] }] }, { "name": "PUB-2", "children": [ { "name": "AUT-21" }, { "name": "AUT-22" }, { "name": "AUT-23" }, { "name": "AUT-24" }, { "name": "AUT-25" }, { "name": "AUT-26" }, { "name": "AUT-27" }, { "name": "AUT-28", "children": [ { "name": "AFF-281" }, { "name": "AFF-282" }, { "name": "AFF-283" }, { "name": "AFF-284" }, { "name": "AFF-285" }, { "name": "AFF-286" }] }] }, { "name": "PUB-3" }, { "name": "PUB-4", "children": [ { "name": "AUT-41" }, { "name": "AUT-42" }, { "name": "AUT-43", "children": [ { "name": "AFF-431" }, { "name": "AFF-432" }, { "name": "AFF-433" }, { "name": "AFF-434", "children": [ { "name": "ADD-4341" }, { "name": "ADD-4342" }] }] }, { "name": "AUT-44" }] }, { "name": "PUB-5", "children": [ { "name": "AUT-51", "children": [ { "name": "AFF-511" }, { "name": "AFF-512" }, { "name": "AFF-513" }, { "name": "AFF-514" }, { "name": "AFF-515" }, { "name": "AFF-516" }] }, { &quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0