添加搜索节点类型选择

src/components/footer.vue

 <template>
   <div class="footer">
-    <n-button type="primary" ghost @click="addSubject">Add Subject</n-button>
+    <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"
-      class="search-bar"
-      type="text"
-      placeholder="Search Subject ..."
+        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

@@ -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

@@ -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

@@ -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

+<!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