refactor: maxSpanningForest template paramters

2024-12-06 13:48:26 +08:00 · 2018-08-09 16:15:42 +08:00 · 2018-08-09 16:15:42 +08:00 · 1bfd456d84
commit 1bfd456d84
parent 34fc2abc4f
6 changed files with 198 additions and 59 deletions
--- a/demos/gallery-anchors-selection.html
+++ b/demos/gallery-anchors-selection.html
@ -0,0 +1,134 @@
+<!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>画廊-多锚点选择</title>
+</head>
+
+<body>
+  <div id="mountNode"></div>
+  <script src="../build/g6.js"></script>
+  <script src="../build/plugin.layout.dagre.js"></script>
+  <script src="../build/plugin.edge.polyline.js"></script>
+  <script>
+    G6.registerNode('rect', {
+      getPath(item) {
+        const width = 100;   // 一半宽
+        const height = 40;  // 一半高
+        return G6.Util.getRectPath(-width/2, -height/2, width, height, 10);
+      },
+      anchor(node) {
+          // const hierarchy = node.getHierarchy();
+          const inEdges = node.getInEdges();
+          const outEdges = node.getOutEdges();
+          const inEdgesNum = inEdges.length;
+          const outEdgesNum = outEdges.length;
+          const inAnchorArea = 1 - 1 / (inEdgesNum + 1);
+          const outAnchorArea = 1 - 1 / (outEdgesNum + 1);
+          const inGap = inAnchorArea / inEdgesNum;
+          const outGap = outAnchorArea / outEdgesNum;
+          const inAnchors = getAnchors(inEdgesNum, inGap, 'in');
+          const outAnchors = getAnchors(outEdgesNum, outGap, 'out');
+          const anchor = inAnchors.concat(outAnchors);
+          return anchor;
+        }
+    });
+    const data = {
+      nodes: [{
+        id: '收集日志',
+      }, {
+        id: '入 es 集群',
+      }, {
+        id: '入 hdfs',
+      },{
+        id: '入 hdfs2',
+      }, {
+        id: 'hive 计算',
+      },{
+        id: 'report',
+      }],
+      edges: [{
+        source: '收集日志',
+        target: '入 es 集群'
+      },{
+        source: '收集日志',
+        target: '入 hdfs'
+      },{
+        source: '收集日志',
+        target: '入 hdfs2'
+      },{
+        source: '入 hdfs',
+        target: 'hive 计算'
+      },{
+        source: '入 hdfs2',
+        target: 'hive 计算'
+      },{
+        source: '入 es 集群',
+        target: 'hive 计算'
+      },{
+        source: 'hive 计算',
+        target: 'report'
+      }]
+    };
+    const graph = new G6.Graph({
+      container: 'mountNode',
+      fitView: 'cc',
+      width: 500,
+      height: 500,
+      plugins: [new G6.Plugins['layout.dagre']()],
+      defaultIntersectBox: 'rect' // 使用矩形包围盒
+    });
+    graph.node({
+      shape: 'rect',
+      label(model) {
+        return model.id;
+      },
+      style: {
+        stroke: '#00C0A5',
+        fill: '#92949F',
+        fillOpacity: 0.45,
+        lineWidth: 2
+      }
+    });
+    graph.edge({
+      shape: 'polyline',
+      style: {
+        endArrow: true,
+        stroke: 'grey',
+        lineWidth: 1,
+        strokeOpacity: 1
+      }
+    });
+    graph.read(data);
+
+    function getAnchors(edgesNum, gap, type){
+      const anchors = [];
+      let y;
+      if(type === 'out') y = 1;
+      else y = 0;
+
+      if(edgesNum % 2) { // odd number
+        anchors.push([0.5, y]);
+        for( let i = 1; i <= (edgesNum - 1) / 2; i += 1){
+          anchors.push([0.5 - i * gap, y]);
+          anchors.push([0.5 + i * gap, y]);
+        }
+      } else { // even number
+        if (edgesNum != 0) {
+          anchors.push([0.5 - gap / 2, y]);
+          anchors.push([0.5 + gap / 2, y]);
+          for( let i = 1; i <= (edgesNum - 2) / 2; i += 1){
+            anchors.push([0.5 - gap / 2 - i * gap, y]);
+            anchors.push([0.5 + gap / 2 + i * gap, y]);
+          }
+        }
+       }
+      return anchors
+    }
+
+  </script>
+</body>
+</html>
--- a/demos/gallery-case1.html
+++ b/demos/gallery-case1.html
@ -18,9 +18,9 @@
 </head>

 <body>
-  <div id='mountNode' style='background-color:rgb(57,64,77);width:736px'>
-    <h3 style='color:white;margin:20pt;padding-top:20pt'>2018 世界杯关注度、胜负分析</h3>
-    <p style='color:rgb(126,131,139);margin:20pt;margin-top:-10pt'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
+  <div id='mountNode' style='background-color:rgb(57,64,77);position:absolute; width:736px; height:800px'>
+    <h3 style='color:white; margin: 20pt 20pt 0pt; position: relative;'>2018 世界杯关注度、胜负分析</h3>
+    <p style='color:rgb(126,131,139); margin:20px 100px 0px 22px'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
  </div>
  
  <div id='legend'></div>
@ -107,13 +107,13 @@
      img.src = './assets/data/footer.png';
      img.setAttribute('width', 130);
      img.style.setProperty('margin', '0pt');
-      img.style.setProperty('margin-top', '-120pt');
+      img.style.setProperty('margin-top', '400pt');
      img.style.setProperty('position', 'absolute');
      parent.appendChild(img);

      var footer = document.createElement("a");
      footer.style.setProperty('margin', '20pt');
-      footer.style.setProperty('margin-top', '-30pt');
+      footer.style.setProperty('margin-top', '485pt');
      footer.style.setProperty('position', 'absolute');
      footer.style.setProperty('color', 'rgb(126,131,139)');
      footer.style.setProperty('text-decoration', 'none');
--- a/demos/gallery-graphanalyzer.html
+++ b/demos/gallery-graphanalyzer.html
@ -100,9 +100,9 @@
      //   });
      // });
      const minimap = document.getElementById('minimap');
-      const legend = document.getElementById('legend');
+      // const legend = document.getElementById('legend');
      if (minimap !== undefined) minimap.style.display = 'none';
-      if (legend !== undefined) legend.style.display = 'none';
+      // if (legend !== undefined) legend.style.display = 'none';
    });

  </script>
--- a/demos/gallery-webIndex.html
+++ b/demos/gallery-webIndex.html
@ -71,7 +71,7 @@
        interactive: false,
        textDisplay: false,
        node_label: null,
-        edge_style(model) {
+        edgeStyle(model) {
          return {
            stroke: graph.find(model.target).getModel().color,
            strokeOpacity: 0.8
--- a/plugins/layout.forceAtlas2/layout.js
+++ b/plugins/layout.forceAtlas2/layout.js
@ -159,11 +159,11 @@ class Layout {
    loading.style.setProperty('background-color', '#fff');
    loading.style.setProperty('position', 'absolute');
    const parent = graph.getGraphContainer().parentNode;
-    const divHeight = parent.offsetHeight ? parent.offsetHeight : 500;
-    const divWidth = parent.offsetWidth ? parent.offsetWidth : 500;
+    const divHeight = parent.offsetHeight ? parent.offsetHeight : 600;
+    const divWidth = parent.offsetWidth ? parent.offsetWidth : 600;
    loading.style.setProperty('width', divWidth + 'px');
    loading.style.setProperty('height', divHeight + 'px');
-    loading.style.setProperty('margin-top', (-parent.offsetHeight) + 'px');
+    loading.style.setProperty('margin-top', 0 + 'px');// (-parent.offsetHeight)s
    loading.style.zIndex = 999;
    parent.appendChild(loading);
    // the loading image
--- a/plugins/template.maxSpanningForest/index.js
+++ b/plugins/template.maxSpanningForest/index.js
@ -37,21 +37,12 @@ class Plugin {
          callBack: 'showAll'
        }]
      },
-      layout: {
-        auto: 'once', // true false once
-        processer: new Layout({
-          kr: 120,
-          kg: 8.0,
-          mode: 'common',
-          prevOverlapping: true,
-          dissuadeHubs: false,
-          maxIteration: 1000,
-          barnesHut: true,
-          ks: 0.1,
-          ksmax: 10,
-          tao: 0.1,
-          ...options.layoutCfg
-        })
+      layoutCfg: {
+        kr: 120,
+        kg: 8.0,
+        prevOverlapping: true,
+        maxIteration: 1000,
+        barnesHut: true
      },
      fisheye: true,
      menu: null,
@ -61,11 +52,22 @@ class Plugin {
        stroke: '#4F7DAB',
        strokeOpacity: 0.65
      },
+      activedEdgeStyle: {
+        endArrow: true,
+        stroke: '#4C7295',
+        strokeOpacity: 1
+      },
      nodeStyle: {
        stroke: '#696969',
        strokeOpacity: 0.4,
        lineWidth: 1
      },
+      activedNodeStyle: {
+        stroke: '#fff',
+        lineWidth: 1,
+        shadowColor: '#6a80aa',
+        shadowBlur: 20
+      },
      node_label(model) {
        return {
          text: model.id,
@ -75,12 +77,12 @@ class Plugin {
        };
      },
      interactive: true,
-      textDisplay: true,
-      ...options
-    });
+      textDisplay: true
+    }, options);
  }
  init() {
    const graph = this.graph;
+
    const highlighter = new G6.Plugins['tool.highlightSubgraph']();
    if (this.fisheye) {
      const fisheye = new G6.Plugins['tool.fisheye']({
@ -94,9 +96,17 @@ class Plugin {
    }
    graph.addPlugin(highlighter);
    graph.on('beforeinit', () => {
-      const layout = graph.get('layout');
+      let layout = graph.get('layout');
      if (!layout) {
-        graph.set('layout', this.layout);
+        const { kr, kg, prevOverlapping, maxIteration, barnesHut } = this.layoutCfg;
+        layout = {
+          auto: 'once', // true false once
+          processer: new Layout({
+            kr, kg, prevOverlapping,
+            maxIteration, barnesHut
+          })
+        };
+        graph.set('layout', layout);
      }
      this.graph.activeItem = item => {
        this.activeItem(item);
@ -134,7 +144,9 @@ class Plugin {
      this.setStyle();
      this.interactive && this.setListener();
      const menuCfg = this.menuCfg;
-      this.menu = new Menu({ menuCfg, graph });
+      if (menuCfg !== null) {
+        this.menu = new Menu({ menuCfg, graph });
+      }
    });
  }
  setStyle() {
@ -164,19 +176,10 @@ class Plugin {
    let style = {};
    let preStyle = {};
    if (item.type === 'node') {
-      style = {
-        stroke: '#fff',
-        lineWidth: 1,
-        shadowColor: '#6a80aa',
-        shadowBlur: 20
-      };
+      style = this.activedNodeStyle;
      preStyle = this.nodeStyle;
    } else if (item.type === 'edge') {
-      style = {
-        endArrow: true,
-        stroke: '#4C7295',
-        strokeOpacity: 1
-      };
+      style = this.activedEdgeStyle;
      preStyle = this.edgeStyle;
    } else return;

@ -229,22 +232,24 @@ class Plugin {
      shape,
      item
    }) => {
-      if (shape && item.isNode) {
-        const menuX = item.getModel().x * graph.getMatrix()[0] + graph.getMatrix()[6];
-        const menuY = item.getModel().y * graph.getMatrix()[0] + graph.getMatrix()[7];
-        this.menu.show(item, menuX, menuY);
-        graph.draw();
-      } else {
-        this.menu.hide();
-        // restore the highlighted graph and hide the edges which are not tree edges.
-        graph.unhighlightGraph();
-        const edges = graph.getEdges();
-        Util.each(edges, edge => {
-          if (edge.isVisible() && !edge.getModel().isTreeEdge) {
-            edge.hide();
-          }
-        });
-        graph.draw();
+      if (this.menuCfg !== null) {
+        if (shape && item.isNode) {
+          const menuX = item.getModel().x * graph.getMatrix()[0] + graph.getMatrix()[6];
+          const menuY = item.getModel().y * graph.getMatrix()[0] + graph.getMatrix()[7];
+          this.menu.show(item, menuX, menuY);
+          graph.draw();
+        } else {
+          this.menu.hide();
+          // restore the highlighted graph and hide the edges which are not tree edges.
+          graph.unhighlightGraph();
+          const edges = graph.getEdges();
+          Util.each(edges, edge => {
+            if (edge.isVisible() && !edge.getModel().isTreeEdge) {
+              edge.hide();
+            }
+          });
+          graph.draw();
+        }
      }

    });