|
|
|
|
@ -10,7 +10,6 @@ |
|
|
|
|
<li>学生入口 |</li> |
|
|
|
|
<li>毕业生入口</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div class="nav2"> |
|
|
|
|
<ul> |
|
|
|
|
@ -36,25 +35,27 @@ |
|
|
|
|
<h1>xxx课程</h1> |
|
|
|
|
</div> |
|
|
|
|
<div class="container"></div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 底部 --> |
|
|
|
|
<div class="footer"> |
|
|
|
|
<h3>软件工程专业</h3> |
|
|
|
|
<h1>教学一体化平台</h1> |
|
|
|
|
<p>关于我们 | 联系我们 | 服务协议 |
|
|
|
|
<p> |
|
|
|
|
关于我们 | 联系我们 |
|
|
|
|
| 服务协议 |
|
|
|
|
</p> |
|
|
|
|
<p style="font-size: 13px; margin-top: 70px"> |
|
|
|
|
黄淮学院版权所有@2023 湘豫CP备 19005950号-1 |
|
|
|
|
<br /> |
|
|
|
|
违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com |
|
|
|
|
</p> |
|
|
|
|
<p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br> |
|
|
|
|
违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div></div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
|
import * as d3 from 'd3'; |
|
|
|
|
import * as d3 from 'd3' |
|
|
|
|
// import { onMounted } from 'vue'; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
@ -70,21 +71,28 @@ export default { |
|
|
|
|
scale: 1, |
|
|
|
|
width: 800, |
|
|
|
|
height: 560, |
|
|
|
|
colorList:['#FD7623','#3388B1','#D82952','#F3D737','#409071','#D64E52'], |
|
|
|
|
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 }, |
|
|
|
|
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 }, |
|
|
|
|
@ -151,8 +159,8 @@ export default { |
|
|
|
|
// { "id": "Brujon", "group": 4 }, |
|
|
|
|
// { "id": "Mme.Hucheloup", "group": 8 } |
|
|
|
|
], |
|
|
|
|
"links": [ |
|
|
|
|
{ "source": "Napoleon", "target": "Myriel", "value": 1 }, |
|
|
|
|
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 }, |
|
|
|
|
@ -406,12 +414,10 @@ export default { |
|
|
|
|
// { "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){ |
|
|
|
|
@ -420,143 +426,161 @@ export default { |
|
|
|
|
// .catch(function(error){ |
|
|
|
|
// console.log(error) |
|
|
|
|
// }) |
|
|
|
|
this.initGraph(this.testGraph); |
|
|
|
|
|
|
|
|
|
this.initGraph(this.testGraph) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
initGraph(data: { |
|
|
|
|
nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue'; |
|
|
|
|
source: string; target: string; value: number; |
|
|
|
|
}[]; |
|
|
|
|
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 _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") |
|
|
|
|
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"); |
|
|
|
|
.join('line') |
|
|
|
|
.attr('stroke-width', (d: { value: number }) => Math.sqrt(d.value)) |
|
|
|
|
.attr('class', 'link') |
|
|
|
|
|
|
|
|
|
const node = g.append("g") |
|
|
|
|
.selectAll("circle") |
|
|
|
|
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") |
|
|
|
|
.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; }){ |
|
|
|
|
.join('text') |
|
|
|
|
.text(function (d: { id: any }) { |
|
|
|
|
return d.id |
|
|
|
|
}) |
|
|
|
|
.attr("fill","white") |
|
|
|
|
.attr("dx",function () { |
|
|
|
|
return this.getBoundingClientRect().width/2*(-1) |
|
|
|
|
.attr('fill', 'white') |
|
|
|
|
.attr('dx', function () { |
|
|
|
|
return (this.getBoundingClientRect().width / 2) * -1 |
|
|
|
|
}) |
|
|
|
|
.attr("dy",50) |
|
|
|
|
.attr("class","node-name") |
|
|
|
|
.attr('dy', 50) |
|
|
|
|
.attr('class', 'node-name') |
|
|
|
|
|
|
|
|
|
node.on("mouseover", function (d, i) { |
|
|
|
|
node |
|
|
|
|
.on('mouseover', function (d, i) { |
|
|
|
|
d3.select(this) |
|
|
|
|
.attr("stroke", "white") // 添加白色边框 |
|
|
|
|
.attr("stroke-width", 5); // 设置边框宽度 |
|
|
|
|
.attr('stroke', 'white') // 添加白色边框 |
|
|
|
|
.attr('stroke-width', 5) // 设置边框宽度 |
|
|
|
|
}) |
|
|
|
|
.on('mouseout', function (d, i) { |
|
|
|
|
d3.select(this).attr('stroke', 'none') // 移出时恢复原始样式 |
|
|
|
|
}) |
|
|
|
|
.on("mouseout", function (d, i) { |
|
|
|
|
d3.select(this) |
|
|
|
|
.attr("stroke", "none"); // 移出时恢复原始样式 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
simulation.on("tick", () => { |
|
|
|
|
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); |
|
|
|
|
.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); |
|
|
|
|
.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); |
|
|
|
|
}); |
|
|
|
|
.attr('x', (d: { x: any }) => d.x) |
|
|
|
|
.attr('y', (d: { y: any }) => d.y) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
updateGraph(data: { links: any[]; }){ |
|
|
|
|
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)); |
|
|
|
|
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; }) { |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
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); |
|
|
|
|
return d3 |
|
|
|
|
.drag() |
|
|
|
|
.on('start', dragstarted) |
|
|
|
|
.on('drag', dragged) |
|
|
|
|
.on('end', dragended) |
|
|
|
|
}, |
|
|
|
|
queryTest(d: { id: any; }){ |
|
|
|
|
queryTest(d: { id: any }) { |
|
|
|
|
// var _this = this |
|
|
|
|
console.log(d.id) |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
* { |
|
|
|
|
margin: 0; |
|
|
|
|
@ -596,8 +620,6 @@ img { |
|
|
|
|
background-image: url('/src/assets/images/top.png'); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 导航栏 |
|
|
|
|
@ -613,7 +635,6 @@ img { |
|
|
|
|
height: 10%; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
// background-color: #6759ff; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.header .nav1 ul li { |
|
|
|
|
@ -662,9 +683,9 @@ img { |
|
|
|
|
font-size: 50px; |
|
|
|
|
margin-top: 23px; |
|
|
|
|
font-weight: bolder; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
color: #ffffff; |
|
|
|
|
float: right; |
|
|
|
|
margin-right: 173px // float: left; |
|
|
|
|
margin-right: 173px; // float: left; |
|
|
|
|
// margin-left: 779px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -672,7 +693,7 @@ img { |
|
|
|
|
font-size: 15px; |
|
|
|
|
margin-top: 102px; |
|
|
|
|
// font-weight:bolder; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
color: #ffffff; |
|
|
|
|
float: right; |
|
|
|
|
margin-right: -175px; |
|
|
|
|
} |
|
|
|
|
@ -688,7 +709,7 @@ img { |
|
|
|
|
margin-top: 10; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 900px; |
|
|
|
|
background-color: #7F9EED; |
|
|
|
|
background-color: #7f9eed; |
|
|
|
|
} |
|
|
|
|
.subnav { |
|
|
|
|
width: 100%; |
|
|
|
|
@ -699,13 +720,13 @@ img { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.subnav h1 { |
|
|
|
|
border-bottom: 4px solid #0052FF; |
|
|
|
|
border-bottom: 4px solid #0052ff; |
|
|
|
|
font-size: 20px; |
|
|
|
|
width: 10%; |
|
|
|
|
height: 35px; |
|
|
|
|
margin: auto; |
|
|
|
|
font-weight: bolder; |
|
|
|
|
color: #0052FF; |
|
|
|
|
color: #0052ff; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
// d3 |
|
|
|
|
@ -755,17 +776,17 @@ img { |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 15px; |
|
|
|
|
padding-top: 40px; |
|
|
|
|
color: #7F9EED; |
|
|
|
|
color: #7f9eed; |
|
|
|
|
font-weight: bolder; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.footer h1 { |
|
|
|
|
width: 100%; |
|
|
|
|
// position: absolute; |
|
|
|
|
font-family: "kaiti_gb2312"; |
|
|
|
|
font-family: 'kaiti_gb2312'; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 25px; |
|
|
|
|
color: #7F9EED; |
|
|
|
|
color: #7f9eed; |
|
|
|
|
font-weight: bolder; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -773,9 +794,9 @@ img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 20px; |
|
|
|
|
// position: absolute; |
|
|
|
|
font-family: "kaiti_gb2312"; |
|
|
|
|
font-family: 'kaiti_gb2312'; |
|
|
|
|
margin-top: 25px; |
|
|
|
|
font-size: 17px; |
|
|
|
|
color: #7F9EED; |
|
|
|
|
color: #7f9eed; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
ww