Skip to content

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

添加搜索节点类型选择

parent 6dce68f5
Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 32 deletions
src/components/footer.vue
View file @ 1bfbe53f
<template>
<div class="footer">
<n-button type="primary" ghost @click="addSubject">Add Subject</n-button>
<n-input
v-model:value="searchKey"
class="search-bar"
type="text"
placeholder="Search Subject ..."
clearable
:on-clear="clear"
@keypress.enter="search"
/>
<n-button type="primary" ghost @click="addSubject">
<template #icon>
<n-icon>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="9"></circle>
<path d="M9 12h6"></path>
<path d="M12 9v6"></path>
</g>
</svg>
</n-icon>
</template>
Add Subject
</n-button>
<n-input-group size="small" class="search-bar">
<n-select
v-model:value="searchType"
style="width: 25%"
placeholder="请选择"
:options="nodeOptions"
/>
<n-input
v-model:value="searchKey"
placeholder="Search Something..."
clearable
:on-clear="clear"
@keypress.enter="search"
/>
<n-button type="primary" ghost @click="search">搜索</n-button>
</n-input-group>
<n-space>
<n-tag v-show="nodeVal" size="small" round :color="color">
{{ nodeVal && nodeVal.nodeLabel }}
......@@ -30,6 +60,7 @@
<script>
import { defineComponent, ref, computed } from 'vue'
import add from '@/assets/images/add.svg'
export default defineComponent({
name: 'Footer',
......@@ -80,11 +111,18 @@ export default defineComponent({
}
const searchKey = ref(null)
const search = () => ctx.emit('search', searchKey.value)
const searchType = ref('Subject')
const search = () => ctx.emit('search', searchType.value, searchKey.value)
const clear = () => {
searchKey.value = null
search()
}
const nodeOptions = ref([
{ label: 'Subject', value: 'Subject' },
{ label: 'Property', value: 'Property' },
{ label: 'System', value: 'System' },
])
return {
curKey,
setKey,
......@@ -92,9 +130,12 @@ export default defineComponent({
color,
nodeVal,
addSubject,
searchType,
searchKey,
search,
clear,
nodeOptions,
add,
}
},
})
......
src/components/main.vue
View file @ 1bfbe53f
......@@ -274,7 +274,7 @@ export default {
})
}
const searchSubject = (key) => {
const searchSubject = (type, key) => {
if (!key) {
fetchSubjects()
return
......@@ -282,7 +282,7 @@ export default {
ajax
.get({
url: api.GET_NODES,
params: { nodeName: key },
params: { type, nodeName: key },
})
.then((res) => {
graphData.value = res.data.content
......
src/main.js
View file @ 1bfbe53f
......@@ -11,9 +11,11 @@ import {
NForm,
NFormItem,
NInput,
NInputGroup,
NSelect,
NMessageProvider,
NDialogProvider,
NIcon,
} from 'naive-ui'
const naive = create({
......@@ -26,9 +28,11 @@ const naive = create({
NForm,
NFormItem,
NInput,
NInputGroup,
NSelect,
NMessageProvider,
NDialogProvider,
NIcon,
],
})
......
src/util/useD3.js
View file @ 1bfbe53f
......@@ -385,19 +385,6 @@ 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)
......@@ -409,14 +396,10 @@ export default class RelationGraph {
this.initCircles()
this.simulation
.nodes(this.config.nodes)
.force('link', d3.forceLink(this.config.links))
.alphaTarget(0.3)
.nodes(this.config.nodes)
.alpha(1)
.restart()
const timer = setTimeout(() => {
this.simulation.alphaTarget(0)
clearTimeout(timer)
}, 200)
}
openMenu(self, d, types) {
......
test.html 0 → 100644
View file @ 1bfbe53f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#main {
overflow: hidden;
position: relative;
}
.nodes circle {
fill: steelblue;
stroke-width: 1;
stroke: white;
r: 10;
}
.links {
stroke: red;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="main">
<div id="map">
<svg id="svg"></svg>
</div>
</div>
<script>
window.onload = () => {
Array.prototype.delete = function (arr) {
var t = [];
for (let j = 0; j < this.length; ++j) {
let f = false;
for (let i = 0; i < arr.length; ++i) {
if (j == arr[i]) {
f = true
}
}
if (!f) {
t.push(this[j])
}
}
return t;
}
var svg = d3.select("svg"),
w = 960,
h = 500
n = 50,
nodesArray = d3.range(n).map(function (i) { return { index: i }; }),
linksArray = d3.range(n).map(function (i) {
return {
source: i,
target: Math.floor(Math.random() * n)
}
})
svg.attr('width', w)
.attr('height', h)
var simulation = d3.forceSimulation(nodesArray)
.force("charge", d3.forceManyBody().strength(-100))
.force("link", d3.forceLink(linksArray).distance(20).strength(1))
//.force("center", d3.forceCenter(w/2, h/2))
.force("x", d3.forceX(w / 2))
.force("y", d3.forceY(h / 2))
.on("tick", ticked);
var rect = svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", w)
.attr("height", h)
.attr('fill', '#ccc')
var g_links = svg.append("g")
.attr("class", "links");
var g_nodes = svg.append("g")
.attr("class", "nodes");
var links = g_links.selectAll("line")
.data(linksArray)
.enter().append("line")
.attr("x2", (d) => { return d.source.x; })
.attr("y2", (d) => { return d.source.y; })
.attr("x1", (d) => { return d.target.x; })
.attr("x1", (d) => { return d.target.y; })
var nodes = g_nodes.selectAll("circle")
.data(nodesArray)
.enter().append("circle")
.attr("cx", (d) => { return d.x; })
.attr("cy", (d) => { return d.y; })
.on("click", remove)
rect.on("click", add, true)
function reDraw() {
var update_nodes = g_nodes.selectAll("circle")
.data(nodesArray);
update_nodes.exit().remove();
nodes = update_nodes.enter()
.append("circle")
.merge(update_nodes);
var update_links = g_links.selectAll("line")
.data(linksArray);
update_links.exit().remove()
links = update_links.enter()
.append("line")
.merge(update_links)
}
function ticked() {
nodes.attr("cx", (d) => { return d.x; })
.attr("cy", (d) => { return d.y; })
links = g_links.selectAll("line")
.attr("x2", (d) => { return d.source.x; })
.attr("y2", (d) => { return d.source.y; })
.attr("x1", (d) => { return d.target.x; })
.attr("y1", (d) => { return d.target.y; })
}
function remove(n, i) {
d3.event.bubbles = false;
if (d3.event.target.tagName == "circle") {
d3.event.stopPropagation();
}
var linkIndex = linksArray.filter((d) => {
return (d.target.index == i || d.source.index == i);
})
linksArray = linksArray.delete(linkIndex.map((d) => {
return d.index;
}))
nodesArray = nodesArray.delete([i]);
simulation.force("link", d3.forceLink(linksArray).distance(20).strength(1))
simulation.nodes(nodesArray);
simulation.alpha(1);
simulation.restart();
reDraw();
}
function add() {
var n = {
index: nodesArray.length,
x: d3.event.x,
y: d3.event.y
}
var l = {
index: linksArray.length,
source: n,
target: nodesArray[Math.floor(nodesArray.length * Math.random())]
}
linksArray.push(l);
nodesArray.push(n);
simulation.force("link", d3.forceLink(linksArray).distance(20).strength(1))
simulation.nodes(nodesArray);
simulation.alpha(1);
simulation.restart();
reDraw();
}
}
</script>
</body>
</html>
\ No newline at end of file
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