修复检索节点重叠，增加连线的滑动显示详细数据

yuanmomoya · Jun 11, 2019 · 79628e1 · 79628e1
1 parent f930dff
commit 79628e1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/kgmaker/src/main/resources/static/js/kgbuilder.js b/kgmaker/src/main/resources/static/js/kgbuilder.js
@@ -549,7 +549,9 @@
             this.svg.attr("width", width);
             this.svg.attr("height", height);
             this.simulation = d3.forceSimulation()
-                .force("link", d3.forceLink().distance(400).id(function (d) {
+                .force("link", d3.forceLink().distance(function(d){
+                    return Math.floor(Math.random() * (700 - 200)) + 200;
+                }).id(function (d) {
                     return d.uuid
                 }))
                 .force("charge", d3.forceManyBody().strength(-400))
@@ -660,7 +662,7 @@
             nodebutton = nodebuttonEnter.merge(nodebutton);
             // 更新节点
             var node = _this.nodeGroup.selectAll("circle").data(nodes, function (d) {
-                return d
+                return d.uuid;
             });
             node.exit().remove();
             var nodeEnter = _this.drawnode(node);
@@ -1147,6 +1149,8 @@
             });
             linkEnter.on("mouseenter", function (d) {
                 d3.select(this).style("stroke-width", "6").attr("stroke", "#ff9e9e").attr("marker-end", "url(#arrow)");
+                _this.nodedetail=d.lk;
+                d3.select('#nodedetail').style('display', 'block');
             });
             linkEnter.on("mouseleave", function (d) {
                 d3.select(this).style("stroke-width", "1").attr("stroke", "#fce6d4").attr("marker-end", "url(#arrow)");
@@ -1603,7 +1607,7 @@ $(function () {
         event.preventDefault();
     });
     $(".graphcontainer").bind("click", function (event) {
-    	if (event.target.tagName!="circle") {
+    	if (event.target.tagName!="circle"&&event.target.tagName!="link") {
         	d3.select('#nodedetail').style('display', 'none');
         }
         if (!(event.target.id === "jsoncontainer" || $(event.target).parents("#jsoncontainer").length > 0)) {

diff --git a/kgmaker/src/main/resources/templates/kg/home.html b/kgmaker/src/main/resources/templates/kg/home.html
@@ -202,9 +202,10 @@ <h2 class="hometitle">交流</h2>
       <!-- 中部 -->
       <el-scrollbar class="mind-cen" id="graphcontainerdiv">
       	<div id="nodedetail" class="node_detail">
-             <h5>节点信息</h5>
+             <h5>详细数据</h5>
              <span class="node_pd" v-for="(m,k) in nodedetail">{{k}}:{{m}}</span>
         </div>
+
         <div v-show="tipsshow" id="operatetips" class="operatetips">
         	 <span style="color:red;position:absolute;top:6px;left:10px;cursor:pointer;" @click="btntipsclose">x</span>
              <span style="color: #EE4000; ">至前端小哥哥小姐姐：如果你们只是参考d3.js创建图谱的力导向图，打开源码后找到</span>