Skip to content

R
relation-graph
Commit 6dce68f5 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

减少物理惯性力

parent 3260a18b
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 32 deletions
index.html
View file @ 6dce68f5
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Vite App</title> <title>Relation Graph</title>
</head> </head>
<body> <body>
......
src/components/d3.vue
View file @ 6dce68f5
...@@ -191,12 +191,12 @@ export default { ...@@ -191,12 +191,12 @@ export default {
<style lang="stylus"> <style lang="stylus">
.relation-tooltip .relation-tooltip
position fixed position fixed
padding 0.5rem 1rem padding 6px 12px
background-color rgba(0,0,0,0.5) background-color rgba(0,0,0,0.5)
border-radius 0.3rem border-radius 6px
color #fff color #fff
backdrop-filter blur(0.5rem) backdrop-filter blur(6px)
-webkit-backdrop-filter blur(0.5rem) -webkit-backdrop-filter blur(6px)
.menu-segment .menu-segment
cursor pointer cursor pointer
......
src/components/footer.vue
View file @ 6dce68f5
...@@ -110,5 +110,6 @@ export default defineComponent({ ...@@ -110,5 +110,6 @@ export default defineComponent({
box-shadow 10px 6px 10px 0 #000 box-shadow 10px 6px 10px 0 #000
margin-top 4px margin-top 4px
.search-bar .search-bar
width 46% flex 1
margin 0 2%
</style> </style>
src/util/useD3.js
View file @ 6dce68f5
...@@ -75,8 +75,8 @@ const defaultConfig = { ...@@ -75,8 +75,8 @@ const defaultConfig = {
isScale: true, // 是否启用缩放平移zoom功能 isScale: true, // 是否启用缩放平移zoom功能
scaleExtent: [0.2, 1.5], // 缩放的比例尺 scaleExtent: [0.2, 1.5], // 缩放的比例尺
chargeStrength: -100, // 万有引力 chargeStrength: -100, // 万有引力
collide: 90, // 碰撞力的大小 （节点之间的间距） collide: 80, // 碰撞力的大小 （节点之间的间距）
alphaDecay: 0.0228, // 控制力学模拟衰减率 alphaDecay: 0.4, // 控制力学模拟衰减率
r: 45, // 圈圈的半径 [30 - 45] r: 45, // 圈圈的半径 [30 - 45]
nodeColor: 'skyblue', // 圈圈节点背景颜色 nodeColor: 'skyblue', // 圈圈节点背景颜色
fontColor: '#2c3e50', // 圈圈内文字的颜色 fontColor: '#2c3e50', // 圈圈内文字的颜色
...@@ -122,6 +122,12 @@ export default class RelationGraph { ...@@ -122,6 +122,12 @@ export default class RelationGraph {
this.dependsNode = [] this.dependsNode = []
this.dependsLinkAndText = [] this.dependsLinkAndText = []
this.tooltip = d3
.select('body')
.append('div')
.attr('class', 'relation-tooltip')
.style('opacity', 0)
this.init() this.init()
} }
...@@ -262,7 +268,6 @@ export default class RelationGraph { ...@@ -262,7 +268,6 @@ export default class RelationGraph {
.attr('class', 'circle-wrapper') .attr('class', 'circle-wrapper')
// .merge(this.circlesWrapper) // .merge(this.circlesWrapper)
this.circlesWrapper.exit().remove() this.circlesWrapper.exit().remove()
// 6.关系图添加用于显示圈圈的节点 // 6.关系图添加用于显示圈圈的节点
this.circles = this.circlesWrapper this.circles = this.circlesWrapper
.append('circle') .append('circle')
...@@ -282,6 +287,11 @@ export default class RelationGraph { ...@@ -282,6 +287,11 @@ export default class RelationGraph {
if (self.config.isHighLight) { if (self.config.isHighLight) {
self.highlightObject(d) self.highlightObject(d)
} }
// self.tooltip
// .html(d[d.nodeLabel.toLowerCase() + 'Name'])
// .style('left', e.pageX + 15 + 'px')
// .style('top', e.pageY + 15 + 'px')
// .style('opacity', 1)
}) })
.on('mouseout', function (e, d) { .on('mouseout', function (e, d) {
d3.select(this).attr('stroke-width', self.config.strokeWidth) d3.select(this).attr('stroke-width', self.config.strokeWidth)
...@@ -289,8 +299,10 @@ export default class RelationGraph { ...@@ -289,8 +299,10 @@ export default class RelationGraph {
if (self.config.isHighLight) { if (self.config.isHighLight) {
self.highlightObject(null) self.highlightObject(null)
} }
// self.tooltip.style('opacity', 0)
}) })
.on('click', function (e, d) { .on('click', function (e, d) {
// self.tooltip.style('opacity', 0)
if (menu && menu.curNodeData == d) { if (menu && menu.curNodeData == d) {
self.closeMenu() self.closeMenu()
} else { } else {
...@@ -372,6 +384,20 @@ export default class RelationGraph { ...@@ -372,6 +384,20 @@ export default class RelationGraph {
update(data) { update(data) {
const { nodes, links } = this.transformData(data) const { nodes, links } = this.transformData(data)
// const circleCoord = (node, index, num_nodes) => {
// const circumference = this.circles.node().getTotalLength()
// const pointAtLength = (l) => this.circles.node().getPointAtLength(l)
// const sectionLength = circumference / num_nodes
// const position = sectionLength * index + sectionLength / 2
// return pointAtLength(circumference - position)
// }
// nodes.forEach(function (n, i) {
// const { x, y } = circleCoord(n, i, nodes.length)
// n.x = x
// n.y = y
// })
this.config.nodes = [...nodes] this.config.nodes = [...nodes]
this.config.links = [...links] this.config.links = [...links]
console.log('update', this.config) console.log('update', this.config)
...@@ -382,29 +408,15 @@ export default class RelationGraph { ...@@ -382,29 +408,15 @@ export default class RelationGraph {
this.initCircles() this.initCircles()
// this.initSimulation()
// // 1. 创建一个力学模拟器
this.simulation this.simulation
.nodes(this.config.nodes) .nodes(this.config.nodes)
.force('link', d3.forceLink(this.config.links)) .force('link', d3.forceLink(this.config.links))
// .force('charge', d3.forceManyBody().strength(this.config.chargeStrength)) .alphaTarget(0.3)
// .force( .restart()
// 'center',
// d3.forceCenter(this.config.width / 2, this.config.height / 2)
// )
// // .force(
// // 'collide',
// // d3.forceCollide(this.config.collide).strength(0.2).iterations(5)
// // )
// // .alphaDecay(this.config.alphaDecay)
// // .on('tick', () => this.ticked())
this.simulation.alphaTarget(0.1).restart()
const timer = setTimeout(() => { const timer = setTimeout(() => {
this.simulation.alphaTarget(0) this.simulation.alphaTarget(0)
clearTimeout(timer) clearTimeout(timer)
}, 500) }, 200)
} }
openMenu(self, d, types) { openMenu(self, d, types) {
...@@ -477,12 +489,6 @@ export default class RelationGraph { ...@@ -477,12 +489,6 @@ export default class RelationGraph {
this.initLinks() this.initLinks()
// const tooltip = d3
// .select('body')
// .append('div')
// .attr('class', 'relation-tooltip')
// .style('opacity', 0)
this.initCircles() this.initCircles()
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment