Skip to content

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

减少物理惯性力

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