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" }] },

    { "name": "AUT-52" },
    { "name": "AUT-53" },
    { "name": "AUT-54" },
    { "name": "AUT-55", "children": [
      { "name": "AFF-551" },
      { "name": "AFF-552" },
      { "name": "AFF-553" },
      { "name": "AFF-554" }] },

    { "name": "AUT-56" },
    { "name": "AUT-57" },
    { "name": "AUT-58" },
    { "name": "AUT-59" },
    { "name": "AUT-591" },
    { "name": "AUT-592" },
    { "name": "AUT-593" },
    { "name": "AUT-594" },
    { "name": "AUT-595" },
    { "name": "AUT-596" }] },


  {
    "name": "PUB-6", "children": [
    { "name": "AUT-61", "children": [
      { "name": "AFF-611" },
      { "name": "AFF-612" },
      { "name": "AFF-613" },
      { "name": "AFF-614", "children": [
        { "name": "ADD-6141" },
        { "name": "ADD-6142" }] }] },


    { "name": "AUT-62" },
    { "name": "AUT-63" },
    { "name": "AUT-64" },
    { "name": "AUT-65" },
    { "name": "AUT-66" },
    { "name.........完整代码请登录后点击上方下载按钮下载查看

网友评论0