commit
58fb85ba3a
6 changed files with 1507 additions and 623 deletions
@ -1,134 +1,781 @@ |
||||
<template> |
||||
<!-- <e-charts id="main" class="chart" /> --> |
||||
<!-- <div class="container" ref="containerRef"> |
||||
<h1>Scroll down to load more content</h1> |
||||
<!-- 头部 --> |
||||
<div class="header"> |
||||
<div class="logo"></div> |
||||
<div class="nav"> |
||||
<div class="nav1"> |
||||
<ul> |
||||
<li>企业入口 |</li> |
||||
<li>教师入口 |</li> |
||||
<li>学生入口 |</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 class="inco"></div> --> |
||||
<h1>学习路径推荐</h1> |
||||
<!-- <p>(专业代码 ：080902H)</p> --> |
||||
</div> |
||||
<!-- 内容学习路径推荐d3 --> |
||||
<div class="content"> |
||||
<p v-for="item in content" :key="item.id">{{ item.text }}</p> |
||||
<div class="subnav"> |
||||
<h1>xxx课程</h1> |
||||
</div> |
||||
<div class="container"></div> |
||||
|
||||
</div> |
||||
<button v-if="showButton" @click="scrollDown">加载更多</button> |
||||
</div> --> |
||||
|
||||
<!-- <div class="container" @mouseover="startTimer" @mouseleave="clearTimer"> |
||||
<h1>Hover for 5 seconds to scroll down and load more content</h1> |
||||
<div class="content" ref="contentRef"> |
||||
<p v-for="item in content" :key="item.id">{{ item.text }}</p> |
||||
<p v-if="!allContentLoaded">Loading more content...</p> |
||||
|
||||
<!-- 底部 --> |
||||
<div class="footer"> |
||||
<h3>软件工程专业</h3> |
||||
<h1>教学一体化平台</h1> |
||||
<p>关于我们 | 联系我们 | 服务协议 |
||||
</p> |
||||
<p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br> |
||||
违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p> |
||||
</div> |
||||
<div> |
||||
|
||||
</div> |
||||
</div> --> |
||||
</template> |
||||
<!-- 学习路径推荐 --> |
||||
|
||||
<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":[] |
||||
} |
||||
|
||||
}; |
||||
|
||||
}, |
||||
mounted() { |
||||
// .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; |
||||
} |
||||
|
||||
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) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
// import { onMounted, ref, reactive } from 'vue'; |
||||
|
||||
// export default { |
||||
// setup() { |
||||
// const containerRef = ref(null); |
||||
// const visibleContent = ref([]); |
||||
// const content = reactive([ |
||||
// { id: 1, text: 'Content 1' }, |
||||
// { id: 2, text: 'Content 2' }, |
||||
// { id: 3, text: 'Content 3' }, |
||||
// { id: 4, text: 'Content 4' }, |
||||
// { id: 5, text: 'Content 5' }, |
||||
// { id: 6, text: 'Content 6' }, |
||||
// { id: 7, text: 'Content 7' }, |
||||
// { id: 8, text: 'Content 8' }, |
||||
// { id: 9, text: 'Content 9' }, |
||||
// { id: 10, text: 'Content 10' } |
||||
// ]); |
||||
|
||||
// const showButton = ref(true); // 控制按钮显示与隐藏 |
||||
|
||||
// const scrollDown = () => { |
||||
// const container = containerRef.value; |
||||
// container.scrollTo({ |
||||
// top: container.scrollHeight, |
||||
// behavior: 'smooth' |
||||
// }); |
||||
// loadMore(); |
||||
// }; |
||||
|
||||
// const loadMore = () => { |
||||
// const startIndex = visibleContent.value.length; |
||||
// const endIndex = startIndex + 3; // 每次加载3个 |
||||
|
||||
// // 将指定范围的内容添加到可见内容列表中 |
||||
// visibleContent.value = [...visibleContent.value, ...content.slice(startIndex, endIndex)]; |
||||
|
||||
// // 检查是否加载完所有内容 |
||||
// if (visibleContent.value.length >= content.length) { |
||||
// showButton.value = false; // 隐藏按钮 |
||||
// } |
||||
// }; |
||||
|
||||
// onMounted(() => { |
||||
// const container = containerRef.value; |
||||
// container.addEventListener('scroll', handleScroll); |
||||
// }); |
||||
|
||||
// const handleScroll = () => { |
||||
// const container = containerRef.value; |
||||
// const scrollPosition = container.scrollTop + container.clientHeight; |
||||
// const scrollHeight = container.scrollHeight; |
||||
|
||||
// // 判断是否滑动到底部 |
||||
// if (scrollPosition === scrollHeight) { |
||||
// showButton.value = true; // 显示按钮 |
||||
// } |
||||
// }; |
||||
|
||||
// return { |
||||
// containerRef, |
||||
// visibleContent, |
||||
// showButton, |
||||
// scrollDown, |
||||
// content |
||||
// }; |
||||
// } |
||||
// }; |
||||
</script> |
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
/* 添加一些样式 */ |
||||
|
||||
// .container { |
||||
// width: 100%; |
||||
// height: 100vh; |
||||
// overflow-y: auto; |
||||
// display: flex; |
||||
// flex-direction: column; |
||||
// justify-content: center; |
||||
// align-items: center; |
||||
// background-color: lightgray; |
||||
// } |
||||
|
||||
// .container .content { |
||||
// margin-top: 20px; |
||||
// padding: 10px; |
||||
// border: 1px solid gray; |
||||
// background-color: white; |
||||
// } |
||||
// .container { |
||||
// width: 100px; |
||||
// height: 100px; |
||||
// // overflow-y: auto; |
||||
// // display: flex; |
||||
// // flex-direction: column; |
||||
// // justify-content: center; |
||||
// // align-items: center; |
||||
// background-color: lightgray; |
||||
// } |
||||
|
||||
// .content { |
||||
// margin-top: 20px; |
||||
// padding: 10px; |
||||
// border: 1px solid gray; |
||||
// background-color: white; |
||||
// } |
||||
// .chart { |
||||
// height: 400px; |
||||
// width: 100%; |
||||
// } |
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
/* box-sizing: border-box; */ |
||||
/* font: 14px/28px "微软雅黑"; */ |
||||
} |
||||
|
||||
ul { |
||||
list-style: none; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
body { |
||||
/* 宽度占浏览器可视区域的宽度 */ |
||||
width: 100vm; |
||||
margin: 0px; |
||||
// position: relative; |
||||
// display:flex; |
||||
// justify-content:center;i |
||||
/* height: 1500px; */ |
||||
// background-color: #FFFFFF; |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
// 头 |
||||
.header { |
||||
width: 100%; |
||||
height: 300px; |
||||
background-image: url('/src/assets/images/top.png'); |
||||
background-size: 100% 100%; |
||||
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff); |
||||
|
||||
|
||||
} |
||||
|
||||
// 导航栏 |
||||
.header .nav { |
||||
width: 95%; |
||||
height: 100px; |
||||
// background-color: #3D78F5; |
||||
} |
||||
|
||||
.header .nav1 { |
||||
float: right; |
||||
width: 24%; |
||||
height: 10%; |
||||
margin-right: 20px; |
||||
// background-color: #6759ff; |
||||
|
||||
} |
||||
|
||||
.header .nav1 ul li { |
||||
float: left; |
||||
margin-left: 5px; |
||||
line-height: 20px; |
||||
color: white; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
// border-right: 1px solid #FFFFFF; |
||||
} |
||||
|
||||
.header .nav2 { |
||||
float: right; |
||||
|
||||
// padding-right: -20px; |
||||
width: 68%; |
||||
height: 25%; |
||||
margin-top: 30px; |
||||
// margin-right: -260px; |
||||
// background-color: #6759ff; |
||||
} |
||||
|
||||
.header .nav2 ul li { |
||||
float: left; |
||||
margin-left: 20px; |
||||
// line-height: 40px; |
||||
color: white; |
||||
font-size: 15px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.header .nav2 ul li:hover { |
||||
color: #74a5ff; |
||||
} |
||||
|
||||
.header .inco { |
||||
float: left; |
||||
width: 48%; |
||||
height: 65.1%; |
||||
margin-left: 80px; |
||||
// background-color: #6759ff; |
||||
} |
||||
|
||||
.header h1 { |
||||
font-size: 50px; |
||||
margin-top: 23px; |
||||
font-weight: bolder; |
||||
color: #FFFFFF; |
||||
float: right; |
||||
margin-right: 173px // float: left; |
||||
// margin-left: 779px; |
||||
} |
||||
|
||||
.header p { |
||||
font-size: 15px; |
||||
margin-top: 102px; |
||||
// font-weight:bolder; |
||||
color: #FFFFFF; |
||||
float: right; |
||||
margin-right: -175px; |
||||
} |
||||
|
||||
.logo { |
||||
width: 15%; |
||||
height: 30%; |
||||
float: left; |
||||
margin-left: 80px; |
||||
} |
||||
// 内容 |
||||
.content{ |
||||
margin-top: 10; |
||||
width: 100%; |
||||
height: 900px; |
||||
background-color: #7F9EED; |
||||
} |
||||
.subnav { |
||||
width: 100%; |
||||
margin: auto; |
||||
margin-top: 50px; |
||||
height: 50px; |
||||
// background-color: #7F9EED; |
||||
} |
||||
|
||||
.subnav h1 { |
||||
border-bottom: 4px solid #0052FF; |
||||
font-size: 20px; |
||||
width: 10%; |
||||
height: 35px; |
||||
margin: auto; |
||||
font-weight: bolder; |
||||
color: #0052FF; |
||||
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; |
||||
} |
||||
|
||||
.node:hover{ |
||||
stroke-width:5; |
||||
} |
||||
|
||||
.nodeName{ |
||||
fill:white; |
||||
} |
||||
|
||||
// 尾部 |
||||
.footer { |
||||
margin-top: 100px; |
||||
// padding-bottom: 0%; |
||||
width: 100%; |
||||
height: 250px; |
||||
// position: absolute; |
||||
text-align: center; |
||||
background-color: #252527; |
||||
} |
||||
|
||||
.footer h3 { |
||||
width: 100%; |
||||
// position: absolute; |
||||
text-align: center; |
||||
font-size: 15px; |
||||
padding-top: 40px; |
||||
color: #7F9EED; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.footer h1 { |
||||
width: 100%; |
||||
// position: absolute; |
||||
font-family: "kaiti_gb2312"; |
||||
margin-top: 10px; |
||||
font-size: 25px; |
||||
color: #7F9EED; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.footer p { |
||||
width: 100%; |
||||
height: 20px; |
||||
// position: absolute; |
||||
font-family: "kaiti_gb2312"; |
||||
margin-top: 25px; |
||||
font-size: 17px; |
||||
color: #7F9EED; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue