diff --git a/.env.development b/.env.development
index 330efcc..f3ef2a8 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '无糖运营平台'
-VITE_APP_BASE_API = 'http://127.0.0.1:8080'
\ No newline at end of file
+VITE_APP_BASE_API = 'http://127.0.0.1:8008'
\ No newline at end of file
diff --git a/src/assets/images/100.png b/src/assets/images/100.png
new file mode 100644
index 0000000..7228b29
Binary files /dev/null and b/src/assets/images/100.png differ
diff --git a/src/assets/images/101.jpg b/src/assets/images/101.jpg
new file mode 100644
index 0000000..607f4e9
Binary files /dev/null and b/src/assets/images/101.jpg differ
diff --git a/src/assets/images/102.jpg b/src/assets/images/102.jpg
new file mode 100644
index 0000000..2f884ad
Binary files /dev/null and b/src/assets/images/102.jpg differ
diff --git a/src/assets/images/103.jpg b/src/assets/images/103.jpg
new file mode 100644
index 0000000..4d57b1b
Binary files /dev/null and b/src/assets/images/103.jpg differ
diff --git a/src/assets/images/104.jpg b/src/assets/images/104.jpg
new file mode 100644
index 0000000..a4fad67
Binary files /dev/null and b/src/assets/images/104.jpg differ
diff --git a/src/assets/images/105.jpg b/src/assets/images/105.jpg
new file mode 100644
index 0000000..2d5b294
Binary files /dev/null and b/src/assets/images/105.jpg differ
diff --git a/src/assets/images/106.jpg b/src/assets/images/106.jpg
new file mode 100644
index 0000000..5fc9337
Binary files /dev/null and b/src/assets/images/106.jpg differ
diff --git a/src/assets/images/107.jpg b/src/assets/images/107.jpg
new file mode 100644
index 0000000..c05e1be
Binary files /dev/null and b/src/assets/images/107.jpg differ
diff --git a/src/assets/images/108.jpg b/src/assets/images/108.jpg
new file mode 100644
index 0000000..2981ff0
Binary files /dev/null and b/src/assets/images/108.jpg differ
diff --git a/src/assets/images/109.jpg b/src/assets/images/109.jpg
new file mode 100644
index 0000000..f2318ca
Binary files /dev/null and b/src/assets/images/109.jpg differ
diff --git a/src/assets/images/110.jpg b/src/assets/images/110.jpg
new file mode 100644
index 0000000..0d5499c
Binary files /dev/null and b/src/assets/images/110.jpg differ
diff --git a/src/assets/images/141.png b/src/assets/images/141.png
new file mode 100644
index 0000000..4132030
Binary files /dev/null and b/src/assets/images/141.png differ
diff --git a/src/assets/images/142.png b/src/assets/images/142.png
new file mode 100644
index 0000000..0f43095
Binary files /dev/null and b/src/assets/images/142.png differ
diff --git a/src/assets/images/4c.jpeg b/src/assets/images/4c.jpeg
new file mode 100644
index 0000000..3dc8b48
Binary files /dev/null and b/src/assets/images/4c.jpeg differ
diff --git a/src/assets/images/R-C.png b/src/assets/images/R-C.png
new file mode 100644
index 0000000..9b2a69b
Binary files /dev/null and b/src/assets/images/R-C.png differ
diff --git a/src/assets/images/a.png b/src/assets/images/a.png
new file mode 100644
index 0000000..3375a9d
Binary files /dev/null and b/src/assets/images/a.png differ
diff --git a/src/assets/images/o.jpg b/src/assets/images/o.jpg
new file mode 100644
index 0000000..78d00bc
Binary files /dev/null and b/src/assets/images/o.jpg differ
diff --git a/src/assets/images/screen (1).png b/src/assets/images/screen (1).png
new file mode 100644
index 0000000..89ad605
Binary files /dev/null and b/src/assets/images/screen (1).png differ
diff --git a/src/assets/images/screen.png b/src/assets/images/screen.png
new file mode 100644
index 0000000..609ac94
Binary files /dev/null and b/src/assets/images/screen.png differ
diff --git a/src/assets/images/yt.png b/src/assets/images/yt.png
new file mode 100644
index 0000000..f46b966
Binary files /dev/null and b/src/assets/images/yt.png differ
diff --git a/src/assets/images/zstp.jpg b/src/assets/images/zstp.jpg
new file mode 100644
index 0000000..bb0b6eb
Binary files /dev/null and b/src/assets/images/zstp.jpg differ
diff --git a/src/router/routers.ts b/src/router/routers.ts
index bd49659..6724cb7 100644
--- a/src/router/routers.ts
+++ b/src/router/routers.ts
@@ -299,4 +299,14 @@ export const constantRoute: any = [
       },
     ],
   },
+  {
+    path: '/curriculumCenter/largeScreen',
+    component: () => import('@/views/course/largeScreen.vue'),
+    name: 'LargeScreen', // name 要与权限一致
+    meta: {
+      title: '课程图谱',
+      hidden: true,
+      icon: 'Notebook',
+    },
+  }
 ]
diff --git a/src/views/course/largeScreen.vue b/src/views/course/largeScreen.vue
new file mode 100644
index 0000000..67b66e0
--- /dev/null
+++ b/src/views/course/largeScreen.vue
@@ -0,0 +1,430 @@
+<template>
+  <div>
+
+        <div class="container">
+          <div class="goto" @click="goBack">
+            <p>返回</p>
+          </div>
+        </div>
+</div>
+  </template>
+  
+  <script lang="ts" >
+  import * as d3 from 'd3';
+  import { useRouter } from 'vue-router'
+  // import portal from './portal/LearningPathRecommendations.vue'
+
+  
+ 
+// import { onMounted } from 'vue';
+
+export default {
+    name: 'courseHomepage',
+    data() {
+        return {
+            svgArea: null,
+            links: [],
+            nodes: [],
+            nodesName: [],
+            linksName: [],
+            simulation: null,
+            scale: 1,
+            width: 800,
+            height: 635,
+            colorList: ['#91CC75', '#5470C6', '#FAC858', '#EE6666', '#73C0DE', '#EA7CCC', '#5577FF', '#5577FF', '#9DBFFF', '#78A7FF'],
+            // colorList: ['#E5A1D6', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB', '#8B81F7', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB'],
+            testGraph: {
+              "nodes": [],
+            "links": []
+                // "nodes": [
+                //     { "id": "Myriel", "group": 8 },
+                //     { "id": "Napoleon", "group": 2 },
+                //     { "id": "Mlle.Baptistine", "group": 3 },
+                //     { "id": "Mme.Magloire", "group": 1 },
+                //     { "id": "CountessdeLo", "group": 5 },
+                //     { "id": "Geborand", "group": 5 },
+                //     { "id": "Champtercier", "group": 6 },
+                //     { "id": "Cravatte", "group": 7 },
+                //     { "id": "Count", "group": 8 },
+                //     { "id": "OldMan", "group": 9 },
+                //     { "id": "Labarre", "group": 5 },
+                //     { "id": "Valjean", "group": 1 },
+                //     { "id": "Marguerite", "group": 3 },
+                //     { "id": "Mme.deR", "group": 2 },
+                //     { "id": "Isabeau", "group": 5 },
+                //     { "id": "Gervais", "group": 9 },
+                //     { "id": "Tholomyes", "group": 8 },
+                //     { "id": "Listolier", "group": 7 },
+                //     { "id": "Fameuil", "group": 6 },
+                //     { "id": "Blacheville", "group": 5 },
+                //     { "id": "Favourite", "group": 4 },
+                //     { "id": "Dahlia", "group": 3 },
+                //     { "id": "Zephine", "group": 9 },
+                //     { "id": "Fantine", "group": 3 },
+                //     { "id": "Mme.Thenardier", "group": 4 },
+                //     { "id": "Thenardier", "group": 4 },
+                //     { "id": "Cosette", "group": 5 },
+                //     { "id": "Javert", "group": 4 },
+                //     { "id": "Fauchelevent", "group": 0 },
+                //     { "id": "Bamatabois", "group": 2 },
+                
+                //     // { "id": "Mme.Hucheloup", "group": 8 }
+                // ],
+                // "links": [
+                //     { "source": "Napoleon", "target": "Myriel", "value": 7 },
+                //     { "source": "Mlle.Baptistine", "target": "Myriel", "value": 7 },
+                //     { "source": "Mme.Magloire", "target": "Myriel", "value": 7 },
+                //     { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 7 },
+                //     { "source": "CountessdeLo", "target": "Myriel", "value": 7 },
+                //     { "source": "Geborand", "target": "Myriel", "value": 7 },
+                //     { "source": "Champtercier", "target": "Myriel", "value": 7 },
+                //     { "source": "Cravatte", "target": "Myriel", "value": 7 },
+                //     { "source": "Count", "target": "Myriel", "value": 7 },
+                //     { "source": "OldMan", "target": "Myriel", "value": 7 },
+                //     { "source": "Valjean", "target": "Labarre", "value": 7 },
+                //     { "source": "Valjean", "target": "Mme.Magloire", "value": 7 },
+                //     { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 },
+                //     { "source": "Valjean", "target": "Myriel", "value": 5 },
+                //     { "source": "Marguerite", "target": "Valjean", "value": 1 },
+                //     { "source": "Mme.deR", "target": "Valjean", "value": 1 },
+                //     { "source": "Isabeau", "target": "Valjean", "value": 1 },
+                //     { "source": "Gervais", "target": "Valjean", "value": 1 },
+                //     { "source": "Listolier", "target": "Tholomyes", "value": 4 },
+                //     { "source": "Fameuil", "target": "Tholomyes", "value": 4 },
+                //     { "source": "Fameuil", "target": "Listolier", "value": 4 },
+                //     { "source": "Blacheville", "target": "Tholomyes", "value": 4 },
+                //     { "source": "Blacheville", "target": "Listolier", "value": 4 },
+                //     { "source": "Blacheville", "target": "Fameuil", "value": 4 },
+                //     { "source": "Favourite", "target": "Tholomyes", "value": 3 },
+                //     { "source": "Favourite", "target": "Listolier", "value": 3 },
+                //     { "source": "Favourite", "target": "Fameuil", "value": 3 },
+                //     { "source": "Favourite", "target": "Blacheville", "value": 4 },
+                //     { "source": "Dahlia", "target": "Tholomyes", "value": 3 },
+                //     { "source": "Dahlia", "target": "Listolier", "value": 3 },
+                //     { "source": "Dahlia", "target": "Fameuil", "value": 3 },
+                //     { "source": "Dahlia", "target": "Blacheville", "value": 3 },
+                //     { "source": "Dahlia", "target": "Favourite", "value": 5 },
+                //     { "source": "Zephine", "target": "Tholomyes", "value": 3 },
+                //     { "source": "Zephine", "target": "Listolier", "value": 3 },
+                //     { "source": "Zephine", "target": "Fameuil", "value": 3 },
+                   
+                //     // { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 }
+                // ]
+                // "links":[]
+            }
+
+        }
+
+    },
+    created() {
+        this.getGraphData()
+      },
+    // mounted() {
+      
+    //     this.initGraph(this.testGraph);
+
+    // },
+    methods: {
+      getGraphData(){
+          var _this = this
+          this.axios.get("person/"+'Rob Reiner')
+          //   this.axios.get("person/all")
+            .then(function (response: { data: any; }) {
+              console.log(response)
+              _this.testGraph["nodes"] = [response.data]
+              _this.initGraph(_this.testGraph)
+            })
+            .catch(function (error: any) {
+              console.log(error)
+            })
+        },
+
+        initGraph(data: {
+            nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue';
+                source: string; target: string; value: number;
+            }[];
+        }) {
+            const _this = this;
+           
+
+            const links = data.links;
+            const nodes = data.nodes;
+          
+
+            const simulation = d3.forceSimulation(nodes)
+                .force("link", d3.forceLink(links).id((d: { id: any; }) => d.id))
+            
+                .force("collide", d3.forceCollide().radius(() => 40))
+                .force("charge", d3.forceManyBody().strength(30))
+                .force("center", d3.forceCenter(_this.width / 2, _this.height / 2));
+        
+
+
+            const svg = d3.select(".container")
+                .append("svg")
+                .attr("viewBox", `0 0 ${_this.width} ${_this.height}`)
+                
+
+
+
+
+            // 初始化阶段之外单独创建线性渐变
+            const defs = svg.append("defs");
+
+            // 在 initGraph 方法中，为每条链接创建线性渐变
+            for (let i = 0; i < links.length; i++) {
+                const linearGradient = defs.append("linearGradient")
+                    .attr("id", `line-gradient-${i}`)
+                    .attr("x1", "0%")
+                    .attr("y1", "0%")
+                    .attr("x2", "100%")
+                    .attr("y2", "100%");
+
+                linearGradient.append("stop")
+                    .attr("offset", "0%")
+                    .attr("stop-color", "#6C9DFC");
+
+                linearGradient.append("stop")
+                    .attr("offset", "50%")
+                    .attr("stop-color", "#9BAAFA");
+
+                linearGradient.append("stop")
+                    .attr("offset", "100%")
+                    .attr("stop-color", "#F3B1BC");
+            }
+            const g = svg.append("g")
+            // 线段
+            const link = g.append("g")
+                .attr("stroke-opacity", 0.6)
+                .selectAll("line")
+                .data(links)
+                .join("line")
+                .style("stroke", (_d: any, i: any) => `url(#line-gradient-${i})`) // 使用线性渐变设置描边颜色
+                .style("stroke-width", (d: { value: number; }) => Math.sqrt(d.value))
+                .attr("class", "link")
+                .attr("marker-end", "url(#arrow)");
+
+
+            // // 创建箭头
+            // const marker = defs.append("marker")
+            //     .attr("id", "arrow")
+            //     .attr("viewBox", "0 -5 10 10")
+            //     .attr("refX", 31)
+            //     .attr("refY", 0)
+            //     .attr("markerWidth", 6)
+            //     .attr("markerHeight", 6)
+            //     .attr("orient", "auto")
+            //     .append("path")
+            //     .attr("d", "M0,-5L10,0L0,5")
+            //     .attr("fill", "#E0AAED");
+
+
+
+            svg.call(d3.zoom().on("zoom", function () {
+                g.attr("transform", d3.event.transform)
+            }))
+
+
+
+            // 设置节点之间的距离
+            const linkForce = d3.forceLink(links)
+                .id((d: { id: any; }) => d.id)
+                .distance(100); // 设置节点之间的距离
+
+            simulation.force("link", linkForce);
+
+            //小球的可视化范围的修改
+
+            const node = g.append("g")
+                .selectAll("circle")
+                .data(nodes)
+                .join("circle")
+                .attr("r", 15)
+                .attr("class", "node")
+                .attr("fill", (d: { id: any; }) => {
+                    return `url(#node-gradient-${d.id})`;
+                })
+                // .attr("fill", _this.color)
+                .on("click", _this.queryTest)
+                .call(_this.drag(simulation));
+
+            // 在 initGraph 方法中为每个小球创建线性渐变
+            for (let i = 0; i < nodes.length; i++) {
+                const linearGradient = defs.append("linearGradient")
+                    .attr("id", `node-gradient-${nodes[i].id}`)
+                    .attr("x1", "0%")
+                    .attr("y1", "0%")
+                    .attr("x2", "0%")
+                    .attr("y2", "100%");
+
+                linearGradient.append("stop")
+                    .attr("offset", "0%")
+                    .attr("stop-color", _this.colorList[nodes[i].group]);
+
+                linearGradient.append("stop")
+                    .attr("offset", "100%")
+                    .attr("stop-color", "#9BBCFC");
+            }
+
+            node.append("title")
+                .text((d: { id: any; }) => d.id);
+
+            const nodeNameText = g.append("g")
+                .selectAll("text")
+                .data(nodes)
+                .join("text")
+                .text(function (d: { id: any; }) {
+                    return d.id
+                })
+                .attr("fill", "white")
+                // .attr("dx", function () {
+                //     return this.getBoundingClientRect().width / 2 * (-1)
+                // })
+                .attr('x', (d: { x: any; }) => d.x)
+                .attr("y", 50)
+                .attr('text-anchor', 'middle')
+                .attr('alignment-baseline', 'middle')
+                .attr("class", "node-name")
+                .style('pointer-events', 'none')
+                .style('font-size', '15px')
+                .style('font-family', 'Arial')
+                .style('text-shadow', '1px 1px 1px #0052FF')
+
+
+
+            node.on("mouseover", function (_d: any, _i: any) {
+                d3.select(this)
+                    .attr("stroke", "white")  // 添加白色边框
+                    .attr("stroke-width", 5);  // 设置边框宽度
+            })
+                .on("mouseout", function (_d: any, _i: any) {
+                    d3.select(this)
+                        .attr("stroke", "none");  // 移出时恢复原始样式
+                });
+
+
+            simulation.on("tick", () => {
+                link
+                    .attr("x1", (d: { source: { x: any; }; }) => d.source.x)
+                    .attr("y1", (d: { source: { y: any; }; }) => d.source.y)
+                    .attr("x2", (d: { target: { x: any; }; }) => d.target.x)
+                    .attr("y2", (d: { target: { y: any; }; }) => d.target.y);
+
+                node
+                    .attr("cx", (d: { x: any; }) => d.x)
+                    .attr("cy", (d: { y: any; }) => d.y);
+
+                nodeNameText
+                    .attr("x", (d: { x: any; }) => d.x)
+                    .attr("y", (d: { y: any; }) => d.y);
+
+            });
+        },
+        updateGraph(data: { links: any[]; }) {
+            // var _this = this
+            const links = data.links.map((d: object | null) => Object.create(d));
+            const nodes = data.nodes.map((d: object | null) => Object.create(d));
+        },
+        color(d: { group: string | number; }) {
+            return this.colorList[d.group]
+            // const scale = d3.scaleOrdinal(d3.schemeCategory10);
+            // return (d: { group: any; }) => scale(d.group);
+        },
+        drag(simulation: { alphaTarget: (arg0: number) => { (): any; new(): any; restart: { (): void; new(): any; }; }; }) {
+            function dragstarted(event: { active: any; }) {
+                if (!event.active) simulation.alphaTarget(0.3).restart();
+                d3.event.subject.fx = d3.event.x;
+                d3.event.subject.fy = d3.event.y;
+            }
+
+            function dragged(_event: any) {
+                d3.event.subject.fx = d3.event.x;
+                d3.event.subject.fy = d3.event.y;
+            }
+
+            function dragended(event: { active: any; }) {
+                if (!event.active) simulation.alphaTarget(0);
+                d3.event.subject.fx = null;
+                d3.event.subject.fy = null;
+            }
+
+            return d3.drag()
+                .on("start", dragstarted)
+                .on("drag", dragged)
+                .on("end", dragended);
+        },
+        queryTest(d: { id: any; }) {
+            // var _this = this
+            console.log(d.id)
+        }
+       
+    },
+    setup() {
+    const router = useRouter();
+
+    const goBack = () => {
+      router.go(-1);
+    };
+
+    return {
+      goBack
+    };
+  }
+
+
+}
+
+  </script>
+  
+  <style lang="scss" scoped>
+
+  // d3
+.container {
+    // width: 1000px;
+    // height: 950px;
+    // border: 1px solid #2c3e50;
+    // border-radius: 8px;
+    // margin-top: 40px;
+    // margin-left: auto;
+    // border-radius: 90%;
+    // margin-right: auto;
+
+    border: 1px solid #CFD9EA;
+    background: linear-gradient(#d5e1f6, #a9c6ff, #d5e1f6);
+    background-image: url('/src/assets/images/106.jpg');
+    // background-size: 100% 80%;
+    background-size: 100% ;
+
+background-attachment: fixed;
+    // border-radius: 50%; // 左下、右下圆角处理
+    // background-color: rgba(0, 0, 0, 0); /* 50% 的透明度 */
+
+}
+.goto {
+    width: 4.5%;
+    height: 3.4%;
+    background-color: rgb(255, 255, 255,0.5);
+    // background-image: url('/src/assets/images/screen (1).png');
+    // background-size: 100% 100%;
+    border-radius: 8px;
+    position: absolute;
+    top: 5%;
+    margin-left: 94%;
+    z-index: 5;
+    cursor: pointer;
+}
+.goto p{
+  text-align: center;
+  color: #ffffff;
+  line-height: 30px;
+  font-size: 14px;
+}
+// .goto :hover{
+//   background-color: #a2abbb;
+//   border-radius: 8px;
+//   width: 4.5%;
+//   height: 3.4%;
+// }
+
+</style>
+  
\ No newline at end of file
diff --git a/src/views/portal/LearningPathRecommendations.vue b/src/views/portal/LearningPathRecommendations.vue
index a8d11bf..696d9de 100644
--- a/src/views/portal/LearningPathRecommendations.vue
+++ b/src/views/portal/LearningPathRecommendations.vue
@@ -1,559 +1,679 @@
 <template>
   <!-- 头部 -->
   <div class="header">
-    <div class="logo"></div>
-    <div class="nav">
-      <div class="nav1">
-        <ul>
-          <li>企业入口&nbsp;&nbsp;|</li>
-          <li>教师入口&nbsp;&nbsp;|</li>
-          <li>学生入口&nbsp;&nbsp;|</li>
-          <li>毕业生入口</li>
-        </ul>
-
-      </div>
-      <div class="nav2">
-        <ul>
-          <li><a>学生首页</a></li>
-          <li><a>专业概况</a></li>
-          <li><a>教学改革</a></li>
-          <li><a>科学研就</a></li>
-          <li><a>人才培养</a></li>
-          <li><a>成果展示</a></li>
-          <li><a>产教结合</a></li>
-          <li><a>日常教学</a></li>
-          <li><a>优秀学生</a></li>
-        </ul>
+      <div class="logo"></div>
+      <div class="nav">
+          <div class="nav1">
+              <ul>
+                  <li>企业入口&nbsp;&nbsp;|</li>
+                  <li>教师入口&nbsp;&nbsp;|</li>
+                  <li>学生入口&nbsp;&nbsp;|</li>
+                  <li>毕业生入口</li>
+              </ul>
+
+          </div>
+          <div class="nav2">
+              <ul>
+                  <li><a>学生首页</a></li>
+                  <li><a>专业概况</a></li>
+                  <li><a>教学改革</a></li>
+                  <li><a>科学研就</a></li>
+                  <li><a>人才培养</a></li>
+                  <li><a>成果展示</a></li>
+                  <li><a>产教结合</a></li>
+                  <li><a>日常教学</a></li>
+                  <li><a>优秀学生</a></li>
+              </ul>
+          </div>
       </div>
-    </div>
-    <!-- <div class="inco"></div> -->
-    <h1>学习路径推荐</h1>
-    <!-- <p>(专业代码 ：080902H)</p> -->
+      <!-- <div class="inco"></div> -->
+      <h1>学习路径推荐</h1>
+      <!-- <p>(专业代码 ：080902H)</p> -->
   </div>
   <!-- 内容学习路径推荐d3 -->
   <div class="content">
-    <div class="subnav">
-    <h1>xxx课程</h1>
-  </div>
-  <div class="container"></div>
+      <div class="subnav">
+          <h1>xxx课程</h1>
+      </div>
+      <!-- <div class="tushi"> -->
+      <el-steps :active="3" align-center style="margin: auto;margin-top: 3%; width:60%;">
+          <el-step title="课程进度0%" description=""></el-step>
+          <el-step title="课程进度50%" description=""></el-step>
+          <el-step title="课程进度100%" description=""></el-step>
+      </el-steps>
+      <!-- </div> -->
+      <div class="tushi2">
+          <!-- <a href="/curriculumCenter/largeScreen">
+          </a> -->
+          <img @click="goToLargScreen" src="/src/assets/images/screen (1).png" width="100%" height="100%">
+
+      </div>
+
+
+      <!-- <div class="con1"></div> -->
+      <div class="container"></div>
 
   </div>
 
+
   <!-- 底部 -->
   <div class="footer">
-    <h3>软件工程专业</h3>
-    <h1>教学一体化平台</h1>
-    <p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
-    </p>
-    <p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
-      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
+      <h3>软件工程专业</h3>
+      <h1>教学一体化平台</h1>
+      <p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
+          服务协议
+      </p>
+      <p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
+          违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
   </div>
   <div>
-    
+
   </div>
 </template>
 
-<script lang="ts" >
+<script lang="ts">
 import * as d3 from 'd3';
 // import { onMounted } from 'vue';
 
 export default {
   name: 'courseHomepage',
   data() {
-    return {
-      svgArea:null,
-          links:[],
-          nodes:[],
-          nodesName:[],
-          linksName:[],
-          simulation:null,
-          scale:1,
-          width:800,
-          height:560,
-          colorList:['#FD7623','#3388B1','#D82952','#F3D737','#409071','#D64E52'],
-      testGraph: {
-        "nodes": [
-          { "id": "Myriel", "group": 1 },
-          { "id": "Napoleon", "group": 1 },
-          { "id": "Mlle.Baptistine", "group": 1 },
-          { "id": "Mme.Magloire", "group": 1 },
-          { "id": "CountessdeLo", "group": 1 },
-          { "id": "Geborand", "group": 1 },
-          { "id": "Champtercier", "group": 1 },
-          { "id": "Cravatte", "group": 1 },
-          { "id": "Count", "group": 1 },
-          { "id": "OldMan", "group": 1 },
-          { "id": "Labarre", "group": 2 },
-          { "id": "Valjean", "group": 2 },
-          // { "id": "Marguerite", "group": 3 },
-          // { "id": "Mme.deR", "group": 2 },
-          // { "id": "Isabeau", "group": 2 },
-          // { "id": "Gervais", "group": 2 },
-          // { "id": "Tholomyes", "group": 3 },
-          // { "id": "Listolier", "group": 3 },
-          // { "id": "Fameuil", "group": 3 },
-          // { "id": "Blacheville", "group": 3 },
-          // { "id": "Favourite", "group": 3 },
-          // { "id": "Dahlia", "group": 3 },
-          // { "id": "Zephine", "group": 3 },
-          // { "id": "Fantine", "group": 3 },
-          // { "id": "Mme.Thenardier", "group": 4 },
-          // { "id": "Thenardier", "group": 4 },
-          // { "id": "Cosette", "group": 5 },
-          // { "id": "Javert", "group": 4 },
-          // { "id": "Fauchelevent", "group": 0 },
-          // { "id": "Bamatabois", "group": 2 },
-          // { "id": "Perpetue", "group": 3 },
-          // { "id": "Simplice", "group": 2 },
-          // { "id": "Scaufflaire", "group": 2 },
-          // { "id": "Woman1", "group": 2 },
-          // { "id": "Judge", "group": 2 },
-          // { "id": "Champmathieu", "group": 2 },
-          // { "id": "Brevet", "group": 2 },
-          // { "id": "Chenildieu", "group": 2 },
-          // { "id": "Cochepaille", "group": 2 },
-          // { "id": "Pontmercy", "group": 4 },
-          // { "id": "Boulatruelle", "group": 6 },
-          // { "id": "Eponine", "group": 4 },
-          // { "id": "Anzelma", "group": 4 },
-          // { "id": "Woman2", "group": 5 },
-          // { "id": "MotherInnocent", "group": 0 },
-          // { "id": "Gribier", "group": 0 },
-          // { "id": "Jondrette", "group": 7 },
-          // { "id": "Mme.Burgon", "group": 7 },
-          // { "id": "Gavroche", "group": 8 },
-          // { "id": "Gillenormand", "group": 5 },
-          // { "id": "Magnon", "group": 5 },
-          // { "id": "Mlle.Gillenormand", "group": 5 },
-          // { "id": "Mme.Pontmercy", "group": 5 },
-          // { "id": "Mlle.Vaubois", "group": 5 },
-          // { "id": "Lt.Gillenormand", "group": 5 },
-          // { "id": "Marius", "group": 8 },
-          // { "id": "BaronessT", "group": 5 },
-          // { "id": "Mabeuf", "group": 8 },
-          // { "id": "Enjolras", "group": 8 },
-          // { "id": "Combeferre", "group": 8 },
-          // { "id": "Prouvaire", "group": 8 },
-          // { "id": "Feuilly", "group": 8 },
-          // { "id": "Courfeyrac", "group": 8 },
-          // { "id": "Bahorel", "group": 8 },
-          // { "id": "Bossuet", "group": 8 },
-          // { "id": "Joly", "group": 8 },
-          // { "id": "Grantaire", "group": 8 },
-          // { "id": "MotherPlutarch", "group": 9 },
-          // { "id": "Gueulemer", "group": 4 },
-          // { "id": "Babet", "group": 4 },
-          // { "id": "Claquesous", "group": 4 },
-          // { "id": "Montparnasse", "group": 4 },
-          // { "id": "Toussaint", "group": 5 },
-          // { "id": "Child1", "group": 10 },
-          // { "id": "Child2", "group": 10 },
-          // { "id": "Brujon", "group": 4 },
-          // { "id": "Mme.Hucheloup", "group": 8 }
-        ],
-        "links": [
-          { "source": "Napoleon", "target": "Myriel", "value": 1 },
-          // { "source": "Mlle.Baptistine", "target": "Myriel", "value": 8 },
-          // { "source": "Mme.Magloire", "target": "Myriel", "value": 10 },
-          // { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6 },
-          // { "source": "CountessdeLo", "target": "Myriel", "value": 1 },
-          // { "source": "Geborand", "target": "Myriel", "value": 1 },
-          // { "source": "Champtercier", "target": "Myriel", "value": 1 },
-          // { "source": "Cravatte", "target": "Myriel", "value": 1 },
-          // { "source": "Count", "target": "Myriel", "value": 2 },
-          // { "source": "OldMan", "target": "Myriel", "value": 1 },
-          // { "source": "Valjean", "target": "Labarre", "value": 1 },
-          // { "source": "Valjean", "target": "Mme.Magloire", "value": 3 },
-          // { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 },
-          // { "source": "Valjean", "target": "Myriel", "value": 5 },
-          // { "source": "Marguerite", "target": "Valjean", "value": 1 },
-          // { "source": "Mme.deR", "target": "Valjean", "value": 1 },
-          // { "source": "Isabeau", "target": "Valjean", "value": 1 },
-          // { "source": "Gervais", "target": "Valjean", "value": 1 },
-          // { "source": "Listolier", "target": "Tholomyes", "value": 4 },
-          // { "source": "Fameuil", "target": "Tholomyes", "value": 4 },
-          // { "source": "Fameuil", "target": "Listolier", "value": 4 },
-          // { "source": "Blacheville", "target": "Tholomyes", "value": 4 },
-          // { "source": "Blacheville", "target": "Listolier", "value": 4 },
-          // { "source": "Blacheville", "target": "Fameuil", "value": 4 },
-          // { "source": "Favourite", "target": "Tholomyes", "value": 3 },
-          // { "source": "Favourite", "target": "Listolier", "value": 3 },
-          // { "source": "Favourite", "target": "Fameuil", "value": 3 },
-          // { "source": "Favourite", "target": "Blacheville", "value": 4 },
-          // { "source": "Dahlia", "target": "Tholomyes", "value": 3 },
-          // { "source": "Dahlia", "target": "Listolier", "value": 3 },
-          // { "source": "Dahlia", "target": "Fameuil", "value": 3 },
-          // { "source": "Dahlia", "target": "Blacheville", "value": 3 },
-          // { "source": "Dahlia", "target": "Favourite", "value": 5 },
-          // { "source": "Zephine", "target": "Tholomyes", "value": 3 },
-          // { "source": "Zephine", "target": "Listolier", "value": 3 },
-          // { "source": "Zephine", "target": "Fameuil", "value": 3 },
-          // { "source": "Zephine", "target": "Blacheville", "value": 3 },
-          // { "source": "Zephine", "target": "Favourite", "value": 4 },
-          // { "source": "Zephine", "target": "Dahlia", "value": 4 },
-          // { "source": "Fantine", "target": "Tholomyes", "value": 3 },
-          // { "source": "Fantine", "target": "Listolier", "value": 3 },
-          // { "source": "Fantine", "target": "Fameuil", "value": 3 },
-          // { "source": "Fantine", "target": "Blacheville", "value": 3 },
-          // { "source": "Fantine", "target": "Favourite", "value": 4 },
-          // { "source": "Fantine", "target": "Dahlia", "value": 4 },
-          // { "source": "Fantine", "target": "Zephine", "value": 4 },
-          // { "source": "Fantine", "target": "Marguerite", "value": 2 },
-          // { "source": "Fantine", "target": "Valjean", "value": 9 },
-          // { "source": "Mme.Thenardier", "target": "Fantine", "value": 2 },
-          // { "source": "Mme.Thenardier", "target": "Valjean", "value": 7 },
-          // { "source": "Thenardier", "target": "Mme.Thenardier", "value": 13 },
-          // { "source": "Thenardier", "target": "Fantine", "value": 1 },
-          // { "source": "Thenardier", "target": "Valjean", "value": 12 },
-          // { "source": "Cosette", "target": "Mme.Thenardier", "value": 4 },
-          // { "source": "Cosette", "target": "Valjean", "value": 31 },
-          // { "source": "Cosette", "target": "Tholomyes", "value": 1 },
-          // { "source": "Cosette", "target": "Thenardier", "value": 1 },
-          // { "source": "Javert", "target": "Valjean", "value": 17 },
-          // { "source": "Javert", "target": "Fantine", "value": 5 },
-          // { "source": "Javert", "target": "Thenardier", "value": 5 },
-          // { "source": "Javert", "target": "Mme.Thenardier", "value": 1 },
-          // { "source": "Javert", "target": "Cosette", "value": 1 },
-          // { "source": "Fauchelevent", "target": "Valjean", "value": 8 },
-          // { "source": "Fauchelevent", "target": "Javert", "value": 1 },
-          // { "source": "Bamatabois", "target": "Fantine", "value": 1 },
-          // { "source": "Bamatabois", "target": "Javert", "value": 1 },
-          // { "source": "Bamatabois", "target": "Valjean", "value": 2 },
-          // { "source": "Perpetue", "target": "Fantine", "value": 1 },
-          // { "source": "Simplice", "target": "Perpetue", "value": 2 },
-          // { "source": "Simplice", "target": "Valjean", "value": 3 },
-          // { "source": "Simplice", "target": "Fantine", "value": 2 },
-          // { "source": "Simplice", "target": "Javert", "value": 1 },
-          // { "source": "Scaufflaire", "target": "Valjean", "value": 1 },
-          // { "source": "Woman1", "target": "Valjean", "value": 2 },
-          // { "source": "Woman1", "target": "Javert", "value": 1 },
-          // { "source": "Judge", "target": "Valjean", "value": 3 },
-          // { "source": "Judge", "target": "Bamatabois", "value": 2 },
-          // { "source": "Champmathieu", "target": "Valjean", "value": 3 },
-          // { "source": "Champmathieu", "target": "Judge", "value": 3 },
-          // { "source": "Champmathieu", "target": "Bamatabois", "value": 2 },
-          // { "source": "Brevet", "target": "Judge", "value": 2 },
-          // { "source": "Brevet", "target": "Champmathieu", "value": 2 },
-          // { "source": "Brevet", "target": "Valjean", "value": 2 },
-          // { "source": "Brevet", "target": "Bamatabois", "value": 1 },
-          // { "source": "Chenildieu", "target": "Judge", "value": 2 },
-          // { "source": "Chenildieu", "target": "Champmathieu", "value": 2 },
-          // { "source": "Chenildieu", "target": "Brevet", "value": 2 },
-          // { "source": "Chenildieu", "target": "Valjean", "value": 2 },
-          // { "source": "Chenildieu", "target": "Bamatabois", "value": 1 },
-          // { "source": "Cochepaille", "target": "Judge", "value": 2 },
-          // { "source": "Cochepaille", "target": "Champmathieu", "value": 2 },
-          // { "source": "Cochepaille", "target": "Brevet", "value": 2 },
-          // { "source": "Cochepaille", "target": "Chenildieu", "value": 2 },
-          // { "source": "Cochepaille", "target": "Valjean", "value": 2 },
-          // { "source": "Cochepaille", "target": "Bamatabois", "value": 1 },
-          // { "source": "Pontmercy", "target": "Thenardier", "value": 1 },
-          // { "source": "Boulatruelle", "target": "Thenardier", "value": 1 },
-          // { "source": "Eponine", "target": "Mme.Thenardier", "value": 2 },
-          // { "source": "Eponine", "target": "Thenardier", "value": 3 },
-          // { "source": "Anzelma", "target": "Eponine", "value": 2 },
-          // { "source": "Anzelma", "target": "Thenardier", "value": 2 },
-          // { "source": "Anzelma", "target": "Mme.Thenardier", "value": 1 },
-          // { "source": "Woman2", "target": "Valjean", "value": 3 },
-          // { "source": "Woman2", "target": "Cosette", "value": 1 },
-          // { "source": "Woman2", "target": "Javert", "value": 1 },
-          // { "source": "MotherInnocent", "target": "Fauchelevent", "value": 3 },
-          // { "source": "MotherInnocent", "target": "Valjean", "value": 1 },
-          // { "source": "Gribier", "target": "Fauchelevent", "value": 2 },
-          // { "source": "Mme.Burgon", "target": "Jondrette", "value": 1 },
-          // { "source": "Gavroche", "target": "Mme.Burgon", "value": 2 },
-          // { "source": "Gavroche", "target": "Thenardier", "value": 1 },
-          // { "source": "Gavroche", "target": "Javert", "value": 1 },
-          // { "source": "Gavroche", "target": "Valjean", "value": 1 },
-          // { "source": "Gillenormand", "target": "Cosette", "value": 3 },
-          // { "source": "Gillenormand", "target": "Valjean", "value": 2 },
-          // { "source": "Magnon", "target": "Gillenormand", "value": 1 },
-          // { "source": "Magnon", "target": "Mme.Thenardier", "value": 1 },
-          // { "source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9 },
-          // { "source": "Mlle.Gillenormand", "target": "Cosette", "value": 2 },
-          // { "source": "Mlle.Gillenormand", "target": "Valjean", "value": 2 },
-          // { "source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1 },
-          // { "source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1 },
-          // { "source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1 },
-          // { "source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2 },
-          // { "source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1 },
-          // { "source": "Lt.Gillenormand", "target": "Cosette", "value": 1 },
-          // { "source": "Marius", "target": "Mlle.Gillenormand", "value": 6 },
-          // { "source": "Marius", "target": "Gillenormand", "value": 12 },
-          // { "source": "Marius", "target": "Pontmercy", "value": 1 },
-          // { "source": "Marius", "target": "Lt.Gillenormand", "value": 1 },
-          // { "source": "Marius", "target": "Cosette", "value": 21 },
-          // { "source": "Marius", "target": "Valjean", "value": 19 },
-          // { "source": "Marius", "target": "Tholomyes", "value": 1 },
-          // { "source": "Marius", "target": "Thenardier", "value": 2 },
-          // { "source": "Marius", "target": "Eponine", "value": 5 },
-          // { "source": "Marius", "target": "Gavroche", "value": 4 },
-          // { "source": "BaronessT", "target": "Gillenormand", "value": 1 },
-          // { "source": "BaronessT", "target": "Marius", "value": 1 },
-          // { "source": "Mabeuf", "target": "Marius", "value": 1 },
-          // { "source": "Mabeuf", "target": "Eponine", "value": 1 },
-          // { "source": "Mabeuf", "target": "Gavroche", "value": 1 },
-          // { "source": "Enjolras", "target": "Marius", "value": 7 },
-          // { "source": "Enjolras", "target": "Gavroche", "value": 7 },
-          // { "source": "Enjolras", "target": "Javert", "value": 6 },
-          // { "source": "Enjolras", "target": "Mabeuf", "value": 1 },
-          // { "source": "Enjolras", "target": "Valjean", "value": 4 },
-          // { "source": "Combeferre", "target": "Enjolras", "value": 15 },
-          // { "source": "Combeferre", "target": "Marius", "value": 5 },
-          // { "source": "Combeferre", "target": "Gavroche", "value": 6 },
-          // { "source": "Combeferre", "target": "Mabeuf", "value": 2 },
-          // { "source": "Prouvaire", "target": "Gavroche", "value": 1 },
-          // { "source": "Prouvaire", "target": "Enjolras", "value": 4 },
-          // { "source": "Prouvaire", "target": "Combeferre", "value": 2 },
-          // { "source": "Feuilly", "target": "Gavroche", "value": 2 },
-          // { "source": "Feuilly", "target": "Enjolras", "value": 6 },
-          // { "source": "Feuilly", "target": "Prouvaire", "value": 2 },
-          // { "source": "Feuilly", "target": "Combeferre", "value": 5 },
-          // { "source": "Feuilly", "target": "Mabeuf", "value": 1 },
-          // { "source": "Feuilly", "target": "Marius", "value": 1 },
-          // { "source": "Courfeyrac", "target": "Marius", "value": 9 },
-          // { "source": "Courfeyrac", "target": "Enjolras", "value": 17 },
-          // { "source": "Courfeyrac", "target": "Combeferre", "value": 13 },
-          // { "source": "Courfeyrac", "target": "Gavroche", "value": 7 },
-          // { "source": "Courfeyrac", "target": "Mabeuf", "value": 2 },
-          // { "source": "Courfeyrac", "target": "Eponine", "value": 1 },
-          // { "source": "Courfeyrac", "target": "Feuilly", "value": 6 },
-          // { "source": "Courfeyrac", "target": "Prouvaire", "value": 3 },
-          // { "source": "Bahorel", "target": "Combeferre", "value": 5 },
-          // { "source": "Bahorel", "target": "Gavroche", "value": 5 },
-          // { "source": "Bahorel", "target": "Courfeyrac", "value": 6 },
-          // { "source": "Bahorel", "target": "Mabeuf", "value": 2 },
-          // { "source": "Bahorel", "target": "Enjolras", "value": 4 },
-          // { "source": "Bahorel", "target": "Feuilly", "value": 3 },
-          // { "source": "Bahorel", "target": "Prouvaire", "value": 2 },
-          // { "source": "Bahorel", "target": "Marius", "value": 1 },
-          // { "source": "Bossuet", "target": "Marius", "value": 5 },
-          // { "source": "Bossuet", "target": "Courfeyrac", "value": 12 },
-          // { "source": "Bossuet", "target": "Gavroche", "value": 5 },
-          // { "source": "Bossuet", "target": "Bahorel", "value": 4 },
-          // { "source": "Bossuet", "target": "Enjolras", "value": 10 },
-          // { "source": "Bossuet", "target": "Feuilly", "value": 6 },
-          // { "source": "Bossuet", "target": "Prouvaire", "value": 2 },
-          // { "source": "Bossuet", "target": "Combeferre", "value": 9 },
-          // { "source": "Bossuet", "target": "Mabeuf", "value": 1 },
-          // { "source": "Bossuet", "target": "Valjean", "value": 1 },
-          // { "source": "Joly", "target": "Bahorel", "value": 5 },
-          // { "source": "Joly", "target": "Bossuet", "value": 7 },
-          // { "source": "Joly", "target": "Gavroche", "value": 3 },
-          // { "source": "Joly", "target": "Courfeyrac", "value": 5 },
-          // { "source": "Joly", "target": "Enjolras", "value": 5 },
-          // { "source": "Joly", "target": "Feuilly", "value": 5 },
-          // { "source": "Joly", "target": "Prouvaire", "value": 2 },
-          // { "source": "Joly", "target": "Combeferre", "value": 5 },
-          // { "source": "Joly", "target": "Mabeuf", "value": 1 },
-          // { "source": "Joly", "target": "Marius", "value": 2 },
-          // { "source": "Grantaire", "target": "Bossuet", "value": 3 },
-          // { "source": "Grantaire", "target": "Enjolras", "value": 3 },
-          // { "source": "Grantaire", "target": "Combeferre", "value": 1 },
-          // { "source": "Grantaire", "target": "Courfeyrac", "value": 2 },
-          // { "source": "Grantaire", "target": "Joly", "value": 2 },
-          // { "source": "Grantaire", "target": "Gavroche", "value": 1 },
-          // { "source": "Grantaire", "target": "Bahorel", "value": 1 },
-          // { "source": "Grantaire", "target": "Feuilly", "value": 1 },
-          // { "source": "Grantaire", "target": "Prouvaire", "value": 1 },
-          // { "source": "MotherPlutarch", "target": "Mabeuf", "value": 3 },
-          // { "source": "Gueulemer", "target": "Thenardier", "value": 5 },
-          // { "source": "Gueulemer", "target": "Valjean", "value": 1 },
-          // { "source": "Gueulemer", "target": "Mme.Thenardier", "value": 1 },
-          // { "source": "Gueulemer", "target": "Javert", "value": 1 },
-          // { "source": "Gueulemer", "target": "Gavroche", "value": 1 },
-          // { "source": "Gueulemer", "target": "Eponine", "value": 1 },
-          // { "source": "Babet", "target": "Thenardier", "value": 6 },
-          // { "source": "Babet", "target": "Gueulemer", "value": 6 },
-          // { "source": "Babet", "target": "Valjean", "value": 1 },
-          // { "source": "Babet", "target": "Mme.Thenardier", "value": 1 },
-          // { "source": "Babet", "target": "Javert", "value": 2 },
-          // { "source": "Babet", "target": "Gavroche", "value": 1 },
-          // { "source": "Babet", "target": "Eponine", "value": 1 },
-          // { "source": "Claquesous", "target": "Thenardier", "value": 4 },
-          // { "source": "Claquesous", "target": "Babet", "value": 4 },
-          // { "source": "Claquesous", "target": "Gueulemer", "value": 4 },
-          // { "source": "Claquesous", "target": "Valjean", "value": 1 },
-          // { "source": "Claquesous", "target": "Mme.Thenardier", "value": 1 },
-          // { "source": "Claquesous", "target": "Javert", "value": 1 },
-          // { "source": "Claquesous", "target": "Eponine", "value": 1 },
-          // { "source": "Claquesous", "target": "Enjolras", "value": 1 },
-          // { "source": "Montparnasse", "target": "Javert", "value": 1 },
-          // { "source": "Montparnasse", "target": "Babet", "value": 2 },
-          // { "source": "Montparnasse", "target": "Gueulemer", "value": 2 },
-          // { "source": "Montparnasse", "target": "Claquesous", "value": 2 },
-          // { "source": "Montparnasse", "target": "Valjean", "value": 1 },
-          // { "source": "Montparnasse", "target": "Gavroche", "value": 1 },
-          // { "source": "Montparnasse", "target": "Eponine", "value": 1 },
-          // { "source": "Montparnasse", "target": "Thenardier", "value": 1 },
-          // { "source": "Toussaint", "target": "Cosette", "value": 2 },
-          // { "source": "Toussaint", "target": "Javert", "value": 1 },
-          // { "source": "Toussaint", "target": "Valjean", "value": 1 },
-          // { "source": "Child1", "target": "Gavroche", "value": 2 },
-          // { "source": "Child2", "target": "Gavroche", "value": 2 },
-          // { "source": "Child2", "target": "Child1", "value": 3 },
-          // { "source": "Brujon", "target": "Babet", "value": 3 },
-          // { "source": "Brujon", "target": "Gueulemer", "value": 3 },
-          // { "source": "Brujon", "target": "Thenardier", "value": 3 },
-          // { "source": "Brujon", "target": "Gavroche", "value": 1 },
-          // { "source": "Brujon", "target": "Eponine", "value": 1 },
-          // { "source": "Brujon", "target": "Claquesous", "value": 1 },
-          // { "source": "Brujon", "target": "Montparnasse", "value": 1 },
-          // { "source": "Mme.Hucheloup", "target": "Bossuet", "value": 1 },
-          // { "source": "Mme.Hucheloup", "target": "Joly", "value": 1 },
-          // { "source": "Mme.Hucheloup", "target": "Grantaire", "value": 1 },
-          // { "source": "Mme.Hucheloup", "target": "Bahorel", "value": 1 },
-          // { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 },
-          // { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 },
-          // { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 }
-        ]
-        // "links":[]
-      }
+      return {
+          svgArea: null,
+          links: [],
+          nodes: [],
+          nodesName: [],
+          linksName: [],
+          simulation: null,
+          scale: 1,
+          width: 800,
+          height: 635,
+          colorList: ['#91CC75', '#5470C6', '#FAC858', '#EE6666', '#73C0DE', '#EA7CCC', '#5577FF', '#5577FF', '#9DBFFF', '#78A7FF'],
+          // colorList: ['#E5A1D6', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB', '#8B81F7', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB'],
+          testGraph: {
+              "nodes": [
+                  { "id": "Myriel", "group": 8 },
+                  { "id": "Napoleon", "group": 2 },
+                  { "id": "Mlle.Baptistine", "group": 3 },
+                  { "id": "Mme.Magloire", "group": 1 },
+                  { "id": "CountessdeLo", "group": 5 },
+                  { "id": "Geborand", "group": 5 },
+                  { "id": "Champtercier", "group": 6 },
+                  { "id": "Cravatte", "group": 7 },
+                  { "id": "Count", "group": 8 },
+                  { "id": "OldMan", "group": 9 },
+                  { "id": "Labarre", "group": 5 },
+                  { "id": "Valjean", "group": 1 },
+                  { "id": "Marguerite", "group": 3 },
+                  { "id": "Mme.deR", "group": 2 },
+                  { "id": "Isabeau", "group": 5 },
+                  { "id": "Gervais", "group": 9 },
+                  { "id": "Tholomyes", "group": 8 },
+                  { "id": "Listolier", "group": 7 },
+                  { "id": "Fameuil", "group": 6 },
+                  { "id": "Blacheville", "group": 5 },
+                  { "id": "Favourite", "group": 4 },
+                  { "id": "Dahlia", "group": 3 },
+                  { "id": "Zephine", "group": 9 },
+                  { "id": "Fantine", "group": 3 },
+                  { "id": "Mme.Thenardier", "group": 4 },
+                  { "id": "Thenardier", "group": 4 },
+                  { "id": "Cosette", "group": 5 },
+                  { "id": "Javert", "group": 4 },
+                  { "id": "Fauchelevent", "group": 0 },
+                  { "id": "Bamatabois", "group": 2 },
+                  { "id": "Perpetue", "group": 3 },
+                  // { "id": "Simplice", "group": 2 },
+                  // { "id": "Scaufflaire", "group": 2 },
+                  // { "id": "Woman1", "group": 2 },
+                  // { "id": "Judge", "group": 2 },
+                  // { "id": "Champmathieu", "group": 2 },
+                  // { "id": "Brevet", "group": 2 },
+                  // { "id": "Chenildieu", "group": 2 },
+                  // { "id": "Cochepaille", "group": 2 },
+                  // { "id": "Pontmercy", "group": 4 },
+                  // { "id": "Boulatruelle", "group": 6 },
+                  // { "id": "Eponine", "group": 4 },
+                  // { "id": "Anzelma", "group": 4 },
+                  // { "id": "Woman2", "group": 5 },
+                  // { "id": "MotherInnocent", "group": 0 },
+                  // { "id": "Gribier", "group": 0 },
+                  // { "id": "Jondrette", "group": 7 },
+                  // { "id": "Mme.Burgon", "group": 7 },
+                  // { "id": "Gavroche", "group": 8 },
+                  // { "id": "Gillenormand", "group": 5 },
+                  // { "id": "Magnon", "group": 5 },
+                  // { "id": "Mlle.Gillenormand", "group": 5 },
+                  // { "id": "Mme.Pontmercy", "group": 5 },
+                  // { "id": "Mlle.Vaubois", "group": 5 },
+                  // { "id": "Lt.Gillenormand", "group": 5 },
+                  // { "id": "Marius", "group": 8 },
+                  // { "id": "BaronessT", "group": 5 },
+                  // { "id": "Mabeuf", "group": 8 },
+                  // { "id": "Enjolras", "group": 8 },
+                  // { "id": "Combeferre", "group": 8 },
+                  // { "id": "Prouvaire", "group": 8 },
+                  // { "id": "Feuilly", "group": 8 },
+                  // { "id": "Courfeyrac", "group": 8 },
+                  // { "id": "Bahorel", "group": 8 },
+                  // { "id": "Bossuet", "group": 8 },
+                  // { "id": "Joly", "group": 8 },
+                  // { "id": "Grantaire", "group": 8 },
+                  // { "id": "MotherPlutarch", "group": 9 },
+                  // { "id": "Gueulemer", "group": 4 },
+                  // { "id": "Babet", "group": 4 },
+                  // { "id": "Claquesous", "group": 4 },
+                  // { "id": "Montparnasse", "group": 4 },
+                  // { "id": "Toussaint", "group": 5 },
+                  // { "id": "Child1", "group": 10 },
+                  // { "id": "Child2", "group": 10 },
+                  // { "id": "Brujon", "group": 4 },
+                  // { "id": "Mme.Hucheloup", "group": 8 }
+              ],
+              "links": [
+                  { "source": "Napoleon", "target": "Myriel", "value": 7 },
+                  { "source": "Mlle.Baptistine", "target": "Myriel", "value": 7 },
+                  { "source": "Mme.Magloire", "target": "Myriel", "value": 7 },
+                  { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 7 },
+                  { "source": "CountessdeLo", "target": "Myriel", "value": 7 },
+                  { "source": "Geborand", "target": "Myriel", "value": 7 },
+                  { "source": "Champtercier", "target": "Myriel", "value": 7 },
+                  { "source": "Cravatte", "target": "Myriel", "value": 7 },
+                  { "source": "Count", "target": "Myriel", "value": 7 },
+                  { "source": "OldMan", "target": "Myriel", "value": 7 },
+                  { "source": "Valjean", "target": "Labarre", "value": 7 },
+                  { "source": "Valjean", "target": "Mme.Magloire", "value": 7 },
+                  { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 },
+                  { "source": "Valjean", "target": "Myriel", "value": 5 },
+                  { "source": "Marguerite", "target": "Valjean", "value": 1 },
+                  { "source": "Mme.deR", "target": "Valjean", "value": 1 },
+                  { "source": "Isabeau", "target": "Valjean", "value": 1 },
+                  { "source": "Gervais", "target": "Valjean", "value": 1 },
+                  { "source": "Listolier", "target": "Tholomyes", "value": 4 },
+                  { "source": "Fameuil", "target": "Tholomyes", "value": 4 },
+                  { "source": "Fameuil", "target": "Listolier", "value": 4 },
+                  { "source": "Blacheville", "target": "Tholomyes", "value": 4 },
+                  { "source": "Blacheville", "target": "Listolier", "value": 4 },
+                  { "source": "Blacheville", "target": "Fameuil", "value": 4 },
+                  { "source": "Favourite", "target": "Tholomyes", "value": 3 },
+                  { "source": "Favourite", "target": "Listolier", "value": 3 },
+                  { "source": "Favourite", "target": "Fameuil", "value": 3 },
+                  { "source": "Favourite", "target": "Blacheville", "value": 4 },
+                  { "source": "Dahlia", "target": "Tholomyes", "value": 3 },
+                  { "source": "Dahlia", "target": "Listolier", "value": 3 },
+                  { "source": "Dahlia", "target": "Fameuil", "value": 3 },
+                  { "source": "Dahlia", "target": "Blacheville", "value": 3 },
+                  { "source": "Dahlia", "target": "Favourite", "value": 5 },
+                  { "source": "Zephine", "target": "Tholomyes", "value": 3 },
+                  { "source": "Zephine", "target": "Listolier", "value": 3 },
+                  { "source": "Zephine", "target": "Fameuil", "value": 3 },
+                  // { "source": "Zephine", "target": "Blacheville", "value": 3 },
+                  // { "source": "Zephine", "target": "Favourite", "value": 4 },
+                  // { "source": "Zephine", "target": "Dahlia", "value": 4 },
+                  // { "source": "Fantine", "target": "Tholomyes", "value": 3 },
+                  // { "source": "Fantine", "target": "Listolier", "value": 3 },
+                  // { "source": "Fantine", "target": "Fameuil", "value": 3 },
+                  // { "source": "Fantine", "target": "Blacheville", "value": 3 },
+                  // { "source": "Fantine", "target": "Favourite", "value": 4 },
+                  // { "source": "Fantine", "target": "Dahlia", "value": 4 },
+                  // { "source": "Fantine", "target": "Zephine", "value": 4 },
+                  // { "source": "Fantine", "target": "Marguerite", "value": 2 },
+                  // { "source": "Fantine", "target": "Valjean", "value": 9 },
+                  // { "source": "Mme.Thenardier", "target": "Fantine", "value": 2 },
+                  // { "source": "Mme.Thenardier", "target": "Valjean", "value": 7 },
+                  // { "source": "Thenardier", "target": "Mme.Thenardier", "value": 13 },
+                  // { "source": "Thenardier", "target": "Fantine", "value": 1 },
+                  // { "source": "Thenardier", "target": "Valjean", "value": 12 },
+                  // { "source": "Cosette", "target": "Mme.Thenardier", "value": 4 },
+                  // { "source": "Cosette", "target": "Valjean", "value": 31 },
+                  // { "source": "Cosette", "target": "Tholomyes", "value": 1 },
+                  // { "source": "Cosette", "target": "Thenardier", "value": 1 },
+                  // { "source": "Javert", "target": "Valjean", "value": 17 },
+                  // { "source": "Javert", "target": "Fantine", "value": 5 },
+                  // { "source": "Javert", "target": "Thenardier", "value": 5 },
+                  // { "source": "Javert", "target": "Mme.Thenardier", "value": 1 },
+                  // { "source": "Javert", "target": "Cosette", "value": 1 },
+                  // { "source": "Fauchelevent", "target": "Valjean", "value": 8 },
+                  // { "source": "Fauchelevent", "target": "Javert", "value": 1 },
+                  // { "source": "Bamatabois", "target": "Fantine", "value": 1 },
+                  // { "source": "Bamatabois", "target": "Javert", "value": 1 },
+                  // { "source": "Bamatabois", "target": "Valjean", "value": 2 },
+                  // { "source": "Perpetue", "target": "Fantine", "value": 1 },
+                  // { "source": "Simplice", "target": "Perpetue", "value": 2 },
+                  // { "source": "Simplice", "target": "Valjean", "value": 3 },
+                  // { "source": "Simplice", "target": "Fantine", "value": 2 },
+                  // { "source": "Simplice", "target": "Javert", "value": 1 },
+                  // { "source": "Scaufflaire", "target": "Valjean", "value": 1 },
+                  // { "source": "Woman1", "target": "Valjean", "value": 2 },
+                  // { "source": "Woman1", "target": "Javert", "value": 1 },
+                  // { "source": "Judge", "target": "Valjean", "value": 3 },
+                  // { "source": "Judge", "target": "Bamatabois", "value": 2 },
+                  // { "source": "Champmathieu", "target": "Valjean", "value": 3 },
+                  // { "source": "Champmathieu", "target": "Judge", "value": 3 },
+                  // { "source": "Champmathieu", "target": "Bamatabois", "value": 2 },
+                  // { "source": "Brevet", "target": "Judge", "value": 2 },
+                  // { "source": "Brevet", "target": "Champmathieu", "value": 2 },
+                  // { "source": "Brevet", "target": "Valjean", "value": 2 },
+                  // { "source": "Brevet", "target": "Bamatabois", "value": 1 },
+                  // { "source": "Chenildieu", "target": "Judge", "value": 2 },
+                  // { "source": "Chenildieu", "target": "Champmathieu", "value": 2 },
+                  // { "source": "Chenildieu", "target": "Brevet", "value": 2 },
+                  // { "source": "Chenildieu", "target": "Valjean", "value": 2 },
+                  // { "source": "Chenildieu", "target": "Bamatabois", "value": 1 },
+                  // { "source": "Cochepaille", "target": "Judge", "value": 2 },
+                  // { "source": "Cochepaille", "target": "Champmathieu", "value": 2 },
+                  // { "source": "Cochepaille", "target": "Brevet", "value": 2 },
+                  // { "source": "Cochepaille", "target": "Chenildieu", "value": 2 },
+                  // { "source": "Cochepaille", "target": "Valjean", "value": 2 },
+                  // { "source": "Cochepaille", "target": "Bamatabois", "value": 1 },
+                  // { "source": "Pontmercy", "target": "Thenardier", "value": 1 },
+                  // { "source": "Boulatruelle", "target": "Thenardier", "value": 1 },
+                  // { "source": "Eponine", "target": "Mme.Thenardier", "value": 2 },
+                  // { "source": "Eponine", "target": "Thenardier", "value": 3 },
+                  // { "source": "Anzelma", "target": "Eponine", "value": 2 },
+                  // { "source": "Anzelma", "target": "Thenardier", "value": 2 },
+                  // { "source": "Anzelma", "target": "Mme.Thenardier", "value": 1 },
+                  // { "source": "Woman2", "target": "Valjean", "value": 3 },
+                  // { "source": "Woman2", "target": "Cosette", "value": 1 },
+                  // { "source": "Woman2", "target": "Javert", "value": 1 },
+                  // { "source": "MotherInnocent", "target": "Fauchelevent", "value": 3 },
+                  // { "source": "MotherInnocent", "target": "Valjean", "value": 1 },
+                  // { "source": "Gribier", "target": "Fauchelevent", "value": 2 },
+                  // { "source": "Mme.Burgon", "target": "Jondrette", "value": 1 },
+                  // { "source": "Gavroche", "target": "Mme.Burgon", "value": 2 },
+                  // { "source": "Gavroche", "target": "Thenardier", "value": 1 },
+                  // { "source": "Gavroche", "target": "Javert", "value": 1 },
+                  // { "source": "Gavroche", "target": "Valjean", "value": 1 },
+                  // { "source": "Gillenormand", "target": "Cosette", "value": 3 },
+                  // { "source": "Gillenormand", "target": "Valjean", "value": 2 },
+                  // { "source": "Magnon", "target": "Gillenormand", "value": 1 },
+                  // { "source": "Magnon", "target": "Mme.Thenardier", "value": 1 },
+                  // { "source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9 },
+                  // { "source": "Mlle.Gillenormand", "target": "Cosette", "value": 2 },
+                  // { "source": "Mlle.Gillenormand", "target": "Valjean", "value": 2 },
+                  // { "source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1 },
+                  // { "source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1 },
+                  // { "source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1 },
+                  // { "source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2 },
+                  // { "source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1 },
+                  // { "source": "Lt.Gillenormand", "target": "Cosette", "value": 1 },
+                  // { "source": "Marius", "target": "Mlle.Gillenormand", "value": 6 },
+                  // { "source": "Marius", "target": "Gillenormand", "value": 12 },
+                  // { "source": "Marius", "target": "Pontmercy", "value": 1 },
+                  // { "source": "Marius", "target": "Lt.Gillenormand", "value": 1 },
+                  // { "source": "Marius", "target": "Cosette", "value": 21 },
+                  // { "source": "Marius", "target": "Valjean", "value": 19 },
+                  // { "source": "Marius", "target": "Tholomyes", "value": 1 },
+                  // { "source": "Marius", "target": "Thenardier", "value": 2 },
+                  // { "source": "Marius", "target": "Eponine", "value": 5 },
+                  // { "source": "Marius", "target": "Gavroche", "value": 4 },
+                  // { "source": "BaronessT", "target": "Gillenormand", "value": 1 },
+                  // { "source": "BaronessT", "target": "Marius", "value": 1 },
+                  // { "source": "Mabeuf", "target": "Marius", "value": 1 },
+                  // { "source": "Mabeuf", "target": "Eponine", "value": 1 },
+                  // { "source": "Mabeuf", "target": "Gavroche", "value": 1 },
+                  // { "source": "Enjolras", "target": "Marius", "value": 7 },
+                  // { "source": "Enjolras", "target": "Gavroche", "value": 7 },
+                  // { "source": "Enjolras", "target": "Javert", "value": 6 },
+                  // { "source": "Enjolras", "target": "Mabeuf", "value": 1 },
+                  // { "source": "Enjolras", "target": "Valjean", "value": 4 },
+                  // { "source": "Combeferre", "target": "Enjolras", "value": 15 },
+                  // { "source": "Combeferre", "target": "Marius", "value": 5 },
+                  // { "source": "Combeferre", "target": "Gavroche", "value": 6 },
+                  // { "source": "Combeferre", "target": "Mabeuf", "value": 2 },
+                  // { "source": "Prouvaire", "target": "Gavroche", "value": 1 },
+                  // { "source": "Prouvaire", "target": "Enjolras", "value": 4 },
+                  // { "source": "Prouvaire", "target": "Combeferre", "value": 2 },
+                  // { "source": "Feuilly", "target": "Gavroche", "value": 2 },
+                  // { "source": "Feuilly", "target": "Enjolras", "value": 6 },
+                  // { "source": "Feuilly", "target": "Prouvaire", "value": 2 },
+                  // { "source": "Feuilly", "target": "Combeferre", "value": 5 },
+                  // { "source": "Feuilly", "target": "Mabeuf", "value": 1 },
+                  // { "source": "Feuilly", "target": "Marius", "value": 1 },
+                  // { "source": "Courfeyrac", "target": "Marius", "value": 9 },
+                  // { "source": "Courfeyrac", "target": "Enjolras", "value": 17 },
+                  // { "source": "Courfeyrac", "target": "Combeferre", "value": 13 },
+                  // { "source": "Courfeyrac", "target": "Gavroche", "value": 7 },
+                  // { "source": "Courfeyrac", "target": "Mabeuf", "value": 2 },
+                  // { "source": "Courfeyrac", "target": "Eponine", "value": 1 },
+                  // { "source": "Courfeyrac", "target": "Feuilly", "value": 6 },
+                  // { "source": "Courfeyrac", "target": "Prouvaire", "value": 3 },
+                  // { "source": "Bahorel", "target": "Combeferre", "value": 5 },
+                  // { "source": "Bahorel", "target": "Gavroche", "value": 5 },
+                  // { "source": "Bahorel", "target": "Courfeyrac", "value": 6 },
+                  // { "source": "Bahorel", "target": "Mabeuf", "value": 2 },
+                  // { "source": "Bahorel", "target": "Enjolras", "value": 4 },
+                  // { "source": "Bahorel", "target": "Feuilly", "value": 3 },
+                  // { "source": "Bahorel", "target": "Prouvaire", "value": 2 },
+                  // { "source": "Bahorel", "target": "Marius", "value": 1 },
+                  // { "source": "Bossuet", "target": "Marius", "value": 5 },
+                  // { "source": "Bossuet", "target": "Courfeyrac", "value": 12 },
+                  // { "source": "Bossuet", "target": "Gavroche", "value": 5 },
+                  // { "source": "Bossuet", "target": "Bahorel", "value": 4 },
+                  // { "source": "Bossuet", "target": "Enjolras", "value": 10 },
+                  // { "source": "Bossuet", "target": "Feuilly", "value": 6 },
+                  // { "source": "Bossuet", "target": "Prouvaire", "value": 2 },
+                  // { "source": "Bossuet", "target": "Combeferre", "value": 9 },
+                  // { "source": "Bossuet", "target": "Mabeuf", "value": 1 },
+                  // { "source": "Bossuet", "target": "Valjean", "value": 1 },
+                  // { "source": "Joly", "target": "Bahorel", "value": 5 },
+                  // { "source": "Joly", "target": "Bossuet", "value": 7 },
+                  // { "source": "Joly", "target": "Gavroche", "value": 3 },
+                  // { "source": "Joly", "target": "Courfeyrac", "value": 5 },
+                  // { "source": "Joly", "target": "Enjolras", "value": 5 },
+                  // { "source": "Joly", "target": "Feuilly", "value": 5 },
+                  // { "source": "Joly", "target": "Prouvaire", "value": 2 },
+                  // { "source": "Joly", "target": "Combeferre", "value": 5 },
+                  // { "source": "Joly", "target": "Mabeuf", "value": 1 },
+                  // { "source": "Joly", "target": "Marius", "value": 2 },
+                  // { "source": "Grantaire", "target": "Bossuet", "value": 3 },
+                  // { "source": "Grantaire", "target": "Enjolras", "value": 3 },
+                  // { "source": "Grantaire", "target": "Combeferre", "value": 1 },
+                  // { "source": "Grantaire", "target": "Courfeyrac", "value": 2 },
+                  // { "source": "Grantaire", "target": "Joly", "value": 2 },
+                  // { "source": "Grantaire", "target": "Gavroche", "value": 1 },
+                  // { "source": "Grantaire", "target": "Bahorel", "value": 1 },
+                  // { "source": "Grantaire", "target": "Feuilly", "value": 1 },
+                  // { "source": "Grantaire", "target": "Prouvaire", "value": 1 },
+                  // { "source": "MotherPlutarch", "target": "Mabeuf", "value": 3 },
+                  // { "source": "Gueulemer", "target": "Thenardier", "value": 5 },
+                  // { "source": "Gueulemer", "target": "Valjean", "value": 1 },
+                  // { "source": "Gueulemer", "target": "Mme.Thenardier", "value": 1 },
+                  // { "source": "Gueulemer", "target": "Javert", "value": 1 },
+                  // { "source": "Gueulemer", "target": "Gavroche", "value": 1 },
+                  // { "source": "Gueulemer", "target": "Eponine", "value": 1 },
+                  // { "source": "Babet", "target": "Thenardier", "value": 6 },
+                  // { "source": "Babet", "target": "Gueulemer", "value": 6 },
+                  // { "source": "Babet", "target": "Valjean", "value": 1 },
+                  // { "source": "Babet", "target": "Mme.Thenardier", "value": 1 },
+                  // { "source": "Babet", "target": "Javert", "value": 2 },
+                  // { "source": "Babet", "target": "Gavroche", "value": 1 },
+                  // { "source": "Babet", "target": "Eponine", "value": 1 },
+                  // { "source": "Claquesous", "target": "Thenardier", "value": 4 },
+                  // { "source": "Claquesous", "target": "Babet", "value": 4 },
+                  // { "source": "Claquesous", "target": "Gueulemer", "value": 4 },
+                  // { "source": "Claquesous", "target": "Valjean", "value": 1 },
+                  // { "source": "Claquesous", "target": "Mme.Thenardier", "value": 1 },
+                  // { "source": "Claquesous", "target": "Javert", "value": 1 },
+                  // { "source": "Claquesous", "target": "Eponine", "value": 1 },
+                  // { "source": "Claquesous", "target": "Enjolras", "value": 1 },
+                  // { "source": "Montparnasse", "target": "Javert", "value": 1 },
+                  // { "source": "Montparnasse", "target": "Babet", "value": 2 },
+                  // { "source": "Montparnasse", "target": "Gueulemer", "value": 2 },
+                  // { "source": "Montparnasse", "target": "Claquesous", "value": 2 },
+                  // { "source": "Montparnasse", "target": "Valjean", "value": 1 },
+                  // { "source": "Montparnasse", "target": "Gavroche", "value": 1 },
+                  // { "source": "Montparnasse", "target": "Eponine", "value": 1 },
+                  // { "source": "Montparnasse", "target": "Thenardier", "value": 1 },
+                  // { "source": "Toussaint", "target": "Cosette", "value": 2 },
+                  // { "source": "Toussaint", "target": "Javert", "value": 1 },
+                  // { "source": "Toussaint", "target": "Valjean", "value": 1 },
+                  // { "source": "Child1", "target": "Gavroche", "value": 2 },
+                  // { "source": "Child2", "target": "Gavroche", "value": 2 },
+                  // { "source": "Child2", "target": "Child1", "value": 3 },
+                  // { "source": "Brujon", "target": "Babet", "value": 3 },
+                  // { "source": "Brujon", "target": "Gueulemer", "value": 3 },
+                  // { "source": "Brujon", "target": "Thenardier", "value": 3 },
+                  // { "source": "Brujon", "target": "Gavroche", "value": 1 },
+                  // { "source": "Brujon", "target": "Eponine", "value": 1 },
+                  // { "source": "Brujon", "target": "Claquesous", "value": 1 },
+                  // { "source": "Brujon", "target": "Montparnasse", "value": 1 },
+                  // { "source": "Mme.Hucheloup", "target": "Bossuet", "value": 1 },
+                  // { "source": "Mme.Hucheloup", "target": "Joly", "value": 1 },
+                  // { "source": "Mme.Hucheloup", "target": "Grantaire", "value": 1 },
+                  // { "source": "Mme.Hucheloup", "target": "Bahorel", "value": 1 },
+                  // { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 },
+                  // { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 },
+                  // { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 }
+              ]
+              // "links":[]
+          }
+
+      };
 
-    }; 
-    
   },
   mounted() {
-    // .then(function(response){
-    //   console.log(response)
-    // })
-    // .catch(function(error){
-    //   console.log(error)
-    // })
-    this.initGraph(this.testGraph);
+      // .then(function(response){
+      //   console.log(response)
+      // })
+      // .catch(function(error){
+      //   console.log(error)
+      // })
+      this.initGraph(this.testGraph);
 
   },
   methods: {
-    initGraph(data: {
-      nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue';
-        source: string; target: string; value: number;
-      }[];
-    }) {
-      const _this = this;
-      const links = data.links;
-      const nodes = data.nodes;
-      // const links = data.links.map((d: object | null) => Object.create(d));
-      // const nodes = data.nodes.map((d: object | null) => Object.create(d));
-
-      const simulation = d3.forceSimulation(nodes)
-        .force("link", d3.forceLink(links).id((d: { id: any; }) => d.id))
-        .force("collide",d3.forceCollide().radius(()=> 30) )
-        .force("charge", d3.forceManyBody().strength(-30))
-        .force("center", d3.forceCenter(_this.width / 2, _this.height / 2));
-
-      const svg = d3.select(".container")
-        .append("svg")
-        .attr("viewBox", `0 0 ${_this.width} ${_this.height}`);
-        svg.call(d3.zoom().on("zoom",function(){
-          g.attr("transform",d3.event.transform)
-        }))
-
-      const g = svg.append("g")
-
-      const link = g.append("g")
-        .attr("stroke", "#999")
-        .attr("stroke-opacity", 0.6)
-        .selectAll("line")
-        .data(links)
-        .join("line") 
-        .attr("stroke-width", (d: { value: number; }) => Math.sqrt(d.value))
-        .attr("class", "link");
-
-      const node = g.append("g")
-        .selectAll("circle")
-        .data(nodes)
-        .join("circle")
-        .attr("r", 40)
-        .attr("class","node")
-        .attr("fill", _this.color)
-        .on("click",_this.queryTest)
-        .call(_this.drag(simulation));
-
-      node.append("title")
-        .text((d: { id: any; }) => d.id);
-
-        const nodeNameText = g.append("g")
-        .selectAll("text")
-        .data(nodes)
-        .join("text") 
-        .text(function(d: { id: any; }){
-          return d.id
-        })
-        .attr("fill","white")
-        .attr("dx",function () {
-              return this.getBoundingClientRect().width/2*(-1)
-            })
-            .attr("dy",50)
-         .attr("class","node-name")
-
-         node.on("mouseover", function (d, i) {
-        d3.select(this)
-          .attr("stroke", "white")  // 添加白色边框
-          .attr("stroke-width", 5);  // 设置边框宽度
-      })
-        .on("mouseout", function (d, i) {
-          d3.select(this)
-            .attr("stroke", "none");  // 移出时恢复原始样式
-        });
-       
-
-      simulation.on("tick", () => {
-        link
-          .attr("x1", (d: { source: { x: any; }; }) => d.source.x)
-          .attr("y1", (d: { source: { y: any; }; }) => d.source.y)
-          .attr("x2", (d: { target: { x: any; }; }) => d.target.x)
-          .attr("y2", (d: { target: { y: any; }; }) => d.target.y);
-
-        node
-          .attr("cx", (d: { x: any; }) => d.x)
-          .attr("cy", (d: { y: any; }) => d.y);
-
-          nodeNameText
-          .attr("x", (d: { x: any; }) => d.x)
-          .attr("y", (d: { y: any; })=> d.y);
-      });
-    },
-    updateGraph(data: { links: any[]; }){
-      // var _this = this
-      const links = data.links.map((d: object | null)=>Object.create(d));
-      const nodes = data.nodes.map((d: object | null)=>Object.create(d));
-    },
-    color(d: { group: string | number; }) {
-      return this.colorList[d.group]
-      // const scale = d3.scaleOrdinal(d3.schemeCategory10);
-      // return (d: { group: any; }) => scale(d.group);
-    },
-    drag(simulation: { alphaTarget: (arg0: number) => { (): any; new(): any; restart: { (): void; new(): any; }; }; }) {
-      function dragstarted(event: { active: any; }) {
-        if (!event.active) simulation.alphaTarget(0.3).restart();
-        d3.event.subject.fx = d3.event.x;
-        d3.event.subject.fy = d3.event.y;
+      initGraph(data: {
+          nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue';
+              source: string; target: string; value: number;
+          }[];
+      }) {
+          const _this = this;
+          // const defs = svg.append("defs");//创建线性渐变
+
+          const links = data.links;
+          const nodes = data.nodes;
+          // const links = data.links.map((d: object | null) => Object.create(d));
+          // const nodes = data.nodes.map((d: object | null) => Object.create(d));
+
+          const simulation = d3.forceSimulation(nodes)
+              .force("link", d3.forceLink(links).id((d: { id: any; }) => d.id))
+              // .force("link", d3.forceLink(links).distance(-30))  // 设置节点间的距离
+              .force("collide", d3.forceCollide().radius(() => 60))
+              .force("charge", d3.forceManyBody().strength(30))
+              .force("center", d3.forceCenter(_this.width / 2, _this.height / 2));
+          // .scale(1.5);  // 设置初始缩放值
+
+
+          const svg = d3.select(".container")
+              .append("svg")
+              .attr("viewBox", `0 0 ${_this.width} ${_this.height}`)
+              .style("width", "1300px")// 修改 SVG 宽度
+              .style("height", "748px")// 修改 SVG 高度
+          // .style("border-radius", "50%")// 修改 SVG 
+          // .style("z-index", "9")// 修改 SVG 
+
+
+
+
+          // 初始化阶段之外单独创建线性渐变
+          const defs = svg.append("defs");
+
+          // 在 initGraph 方法中，为每条链接创建线性渐变
+          for (let i = 0; i < links.length; i++) {
+              const linearGradient = defs.append("linearGradient")
+                  .attr("id", `line-gradient-${i}`)
+                  .attr("x1", "0%")
+                  .attr("y1", "0%")
+                  .attr("x2", "100%")
+                  .attr("y2", "100%");
+
+              linearGradient.append("stop")
+                  .attr("offset", "0%")
+                  .attr("stop-color", "#6C9DFC");
+
+              linearGradient.append("stop")
+                  .attr("offset", "50%")
+                  .attr("stop-color", "#9BAAFA");
+
+              linearGradient.append("stop")
+                  .attr("offset", "100%")
+                  .attr("stop-color", "#F3B1BC");
+          }
+          const g = svg.append("g")
+          // 线段
+          const link = g.append("g")
+              .attr("stroke-opacity", 0.6)
+              .selectAll("line")
+              .data(links)
+              .join("line")
+              .style("stroke", (_d: any, i: any) => `url(#line-gradient-${i})`) // 使用线性渐变设置描边颜色
+              .style("stroke-width", (d: { value: number; }) => Math.sqrt(d.value))
+              .attr("class", "link")
+              .attr("marker-end", "url(#arrow)");
+
+
+          // // 创建箭头
+          // const marker = defs.append("marker")
+          //     .attr("id", "arrow")
+          //     .attr("viewBox", "0 -5 10 10")
+          //     .attr("refX", 31)
+          //     .attr("refY", 0)
+          //     .attr("markerWidth", 6)
+          //     .attr("markerHeight", 6)
+          //     .attr("orient", "auto")
+          //     .append("path")
+          //     .attr("d", "M0,-5L10,0L0,5")
+          //     .attr("fill", "#E0AAED");
+
+
+
+          svg.call(d3.zoom().on("zoom", function () {
+              g.attr("transform", d3.event.transform)
+          }))
+
+
+
+          // 设置节点之间的距离
+          const linkForce = d3.forceLink(links)
+              .id((d: { id: any; }) => d.id)
+              .distance(100); // 设置节点之间的距离
+
+          simulation.force("link", linkForce);
+
+          //小球的可视化范围的修改
+
+          const node = g.append("g")
+              .selectAll("circle")
+              .data(nodes)
+              .join("circle")
+              .attr("r", 23)
+              .attr("class", "node")
+              .attr("fill", (d: { id: any; }) => {
+                  return `url(#node-gradient-${d.id})`;
+              })
+              // .attr("fill", _this.color)
+              .on("click", _this.queryTest)
+              .call(_this.drag(simulation));
+
+          // 在 initGraph 方法中为每个小球创建线性渐变
+          for (let i = 0; i < nodes.length; i++) {
+              const linearGradient = defs.append("linearGradient")
+                  .attr("id", `node-gradient-${nodes[i].id}`)
+                  .attr("x1", "0%")
+                  .attr("y1", "0%")
+                  .attr("x2", "0%")
+                  .attr("y2", "100%");
+
+              linearGradient.append("stop")
+                  .attr("offset", "0%")
+                  .attr("stop-color", _this.colorList[nodes[i].group]);
+
+              linearGradient.append("stop")
+                  .attr("offset", "100%")
+                  .attr("stop-color", "#9BBCFC");
+          }
+
+          node.append("title")
+              .text((d: { id: any; }) => d.id);
+
+          const nodeNameText = g.append("g")
+              .selectAll("text")
+              .data(nodes)
+              .join("text")
+              .text(function (d: { id: any; }) {
+                  return d.id
+              })
+              .attr("fill", "white")
+              // .attr("dx", function () {
+              //     return this.getBoundingClientRect().width / 2 * (-1)
+              // })
+              .attr('x', (d: { x: any; }) => d.x)
+              .attr("y", 50)
+              .attr('text-anchor', 'middle')
+              .attr('alignment-baseline', 'middle')
+              .attr("class", "node-name")
+              .style('pointer-events', 'none')
+              .style('font-size', '15px')
+              .style('font-family', 'Arial')
+              .style('text-shadow', '1px 1px 1px #0052FF')
+
+
+
+          node.on("mouseover", function (_d: any, _i: any) {
+              d3.select(this)
+                  .attr("stroke", "white")  // 添加白色边框
+                  .attr("stroke-width", 5);  // 设置边框宽度
+          })
+              .on("mouseout", function (_d: any, _i: any) {
+                  d3.select(this)
+                      .attr("stroke", "none");  // 移出时恢复原始样式
+              });
+
+
+          simulation.on("tick", () => {
+              link
+                  .attr("x1", (d: { source: { x: any; }; }) => d.source.x)
+                  .attr("y1", (d: { source: { y: any; }; }) => d.source.y)
+                  .attr("x2", (d: { target: { x: any; }; }) => d.target.x)
+                  .attr("y2", (d: { target: { y: any; }; }) => d.target.y);
+
+              node
+                  .attr("cx", (d: { x: any; }) => d.x)
+                  .attr("cy", (d: { y: any; }) => d.y);
+
+              nodeNameText
+                  .attr("x", (d: { x: any; }) => d.x)
+                  .attr("y", (d: { y: any; }) => d.y);
+
+          });
+      },
+      updateGraph(data: { links: any[]; }) {
+          // var _this = this
+          const links = data.links.map((d: object | null) => Object.create(d));
+          const nodes = data.nodes.map((d: object | null) => Object.create(d));
+      },
+      color(d: { group: string | number; }) {
+          return this.colorList[d.group]
+          // const scale = d3.scaleOrdinal(d3.schemeCategory10);
+          // return (d: { group: any; }) => scale(d.group);
+      },
+      drag(simulation: { alphaTarget: (arg0: number) => { (): any; new(): any; restart: { (): void; new(): any; }; }; }) {
+          function dragstarted(event: { active: any; }) {
+              if (!event.active) simulation.alphaTarget(0.3).restart();
+              d3.event.subject.fx = d3.event.x;
+              d3.event.subject.fy = d3.event.y;
+          }
+
+          function dragged(_event: any) {
+              d3.event.subject.fx = d3.event.x;
+              d3.event.subject.fy = d3.event.y;
+          }
+
+          function dragended(event: { active: any; }) {
+              if (!event.active) simulation.alphaTarget(0);
+              d3.event.subject.fx = null;
+              d3.event.subject.fy = null;
+          }
+
+          return d3.drag()
+              .on("start", dragstarted)
+              .on("drag", dragged)
+              .on("end", dragended);
+      },
+      queryTest(d: { id: any; }) {
+          // var _this = this
+          console.log(d.id)
+      },
+      goToLargScreen() {
+          this.$router.push('/curriculumCenter/largeScreen')
       }
-
-      function dragged(event: any) {
-        d3.event.subject.fx = d3.event.x;
-        d3.event.subject.fy = d3.event.y;
-      }
-
-      function dragended(event: { active: any; }) {
-        if (!event.active) simulation.alphaTarget(0);
-        d3.event.subject.fx = null;
-        d3.event.subject.fy = null;
-      }
-
-      return d3.drag()
-        .on("start", dragstarted)
-        .on("drag", dragged)
-        .on("end", dragended);
-    },
-    queryTest(d: { id: any; }){
-      // var _this = this
-      console.log(d.id)
-    }
   }
+
 }
 
 
+
 </script>
 
 
@@ -665,7 +785,7 @@ img {
   color: #FFFFFF;
   float: right;
   margin-right: 173px // float: left;
-    // margin-left: 779px;
+      // margin-left: 779px;
 }
 
 .header p {
@@ -683,13 +803,16 @@ img {
   float: left;
   margin-left: 80px;
 }
+
 // 内容
-.content{
+.content {
   margin-top: 10;
   width: 100%;
+  position: relative;
   height: 900px;
-  background-color: #7F9EED;
+  // background-color: #7F9EED;
 }
+
 .subnav {
   width: 100%;
   margin: auto;
@@ -699,49 +822,116 @@ img {
 }
 
 .subnav h1 {
-  border-bottom: 4px solid #0052FF;
+  border-bottom: 4px solid #3E79F6;
   font-size: 20px;
   width: 10%;
   height: 35px;
   margin: auto;
   font-weight: bolder;
-  color: #0052FF;
+  color: #3E79F6;
   text-align: center;
 }
+
 // d3
-.container{
-    width: 1000px;
-    height: 700px;
-    // border: 1px solid #2c3e50;
-    border-radius:8px;
-    margin-top: 40px;
-    margin-left: auto;
-    // border-radius: 50%;
-    margin-right: auto;
-    border: #79c4f3;
-    background-color: #79c4f3 ;
-    // background: #79c4f3 repeating-linear-gradient(30deg,
-    // hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px,
-    // transparent 0, transparent 30px);
-  }
-  .node{
-    stroke:#fff;
-    stroke-width:1;
-    cursor: pointer;
-  }
+// .con{
+//     width: 95%;
+//     height: 900px;
+//     margin: auto;
+//     // background-color: #3E79F6;
+//     background-image: url('/src/assets/images/142.png');
+//     background-size: 100% 100%;
+//     top: 353px;
+//     left: 4%;
+//     // position: absolute;
+//     // background-color: #409effff;
+
+//     // border-left: 1px solid #3E79F6;
+// }
+// .con1{
+//     width: 0.1%;
+//     height: 500px;
+//     // margin: auto;
+//     // background-color: #3E79F6;
+//     top: 353px;
+//     right: 4%;
+//     position: absolute;
+//     background-color: #409effff;
+
+//     // border-left: 1px solid #3E79F6;
+// }
+.container {
+  width: 1300px;
+  height: 750px;
+  // border: 1px solid #2c3e50;
+  border-radius: 8px;
+  margin-top: 2.5%;
+  margin-left: auto;
+  // border-radius: 90%;
+  margin-right: auto;
+
+  border: 1px solid #CFD9EA;
+  background: linear-gradient(#d5e1f6, #a9c6ff, #d5e1f6);
+  background-image: url('/src/assets/images/106.jpg');
+  background-size: 100% 100%;
+  // border-radius: 10px  10%  10% 10%; // 左下、右下圆角处理
+  // background-color: rgba(0, 0, 0, 0); /* 50% 的透明度 */
 
-  .node:hover{
-    stroke-width:5;
-  }
+}
 
-  .nodeName{
-    fill:white;
-  }
+// .tushi {
+//     width: 100%;
+//     height: 10%;
+//     // background-color: #F0F4FA;
+//     position: absolute;
+//     padding-top: 10%;
+//     z-index: 5;
+// }
+
+// .tushi1 {
+//     width: 100%;
+//     height: 15%;
+//     // background-color: #F0F4FA;
+//     position: absolute;
+//     top: 105%;
+//     z-index: 5;
+// }
+
+.tushi2 {
+  width: 1.8%;
+  height: 3%;
+  // background-color: #304564;
+  // background-image: url('/src/assets/images/screen (1).png');
+  // background-size: 100% 100%;
+  position: absolute;
+  top: 25%;
+  margin-left: 87%;
+  z-index: 5;
+}
+
+.tushi2:hover {
+  transform: scale(1.05);
+}
+
+
+// .node{
+//   stroke:#fff;
+//   stroke-width:1;
+//   cursor: pointer;
+// }
+
+// .node:hover{
+//   stroke-width:5;
+// }
+
+// .nodeName{
+//   fill:white;
+// }
 
 // 尾部
 .footer {
   margin-top: 100px;
   // padding-bottom: 0%;
+  margin-top: 15%;
   width: 100%;
   height: 250px;
   // position: absolute;
@@ -778,4 +968,4 @@ img {
   font-size: 17px;
   color: #7F9EED;
 }
-</style>
+</style>
\ No newline at end of file