Question

我有几个节点（例如应用程序名称）和一些带标签的边缘（例如信息流/系统接口及其信息对象）。我希望能够编写一个javascript脚本，以无重叠的方式绘制节点网格（例如信息流图），这意味着：

边缘的标签不会被节点和/或彼此重叠
节点不会被边线和/或边缘标签和/或彼此重叠

节点也需要放置的方式尽可能多的边缘线是可见的，而不是彼此混淆 - 因此需要进行某种优化。还要求任何节点都可能连接到任何其他节点。

为了做到这一点，我正在寻找一个关于如何做到这一点（高级伪代码）或者随时可用的javascript实现的粗略想法。

我对以下内容不感兴趣，因为我知道它是如何工作的：

放置/移动divs
绘制svg行
任何类型的数据转换工作或数据资产必须进行的培训（向量，矩阵，稀疏矩阵......）

我开始使用类似的东西：

将只有一条边的节点放到画布的外部空间
将连接到它们的节点放在靠近它们的地方

那样我就会有一棵树，我可以轻松地在我的画布上圆形展开。最初的想法是从那里做一些排序和分组。但是我很难将子树从网格结构中分组出来，不知何故卡在那里。

我也在想碰撞检测可能对我有所帮助。但是我没有说明如何帮助我放置节点，因此边缘在可见方面是最佳的。

为了使这里更加明显，输入数据结构如下：

＆＃13;

%ALLOC()

＆＃13;

Answer 1

或者是一个随时可用的JavaScript实现

Springy.js可能适合您的需求......自从我上次使用它以来已经有一段时间了，但它有一个非常直接的API，所以它可能值得给它一试。一个例子：

＆＃13;

var nodeseq = [  // id,name
  {id:'i1',name:'app1'},
  {id:'i2',name:'app2'},
  {id:'i3',name:'app3'},
  {id:'i4',name:'app4'},
];

var edgeseq = [  // id,sourcenodeid,targetnodeid,label
  {id:'i1',sourcenodeid:'i1',targetnodeid:'i2',label:'Invoice'},
  {id:'i2',sourcenodeid:'i1',targetnodeid:'i3',label:'Advise'},
  {id:'i3',sourcenodeid:'i3',targetnodeid:'i3',label:'Test'},
  {id:'i4',sourcenodeid:'i3',targetnodeid:'i4',label:'Test'},
  {id:'i5',sourcenodeid:'i2',targetnodeid:'i3',label:'Test'},
];

var graph = new Springy.Graph();
var createNode = node => graph.newNode({label: node.name });

var nodeMap = makeMap("id", nodeseq, createNode);

// connect them with an edge
edgeseq.forEach(edge => graph.newEdge(
  nodeMap[edge.sourcenodeid],
  nodeMap[edge.targetnodeid],
  { label: edge.label }
));

$('canvas').springy({ graph: graph });

// Utils
function makeMap(prop, arr, t) {
  t = t || (v => v);
  return arr
    .reduce((map, item) => Object.assign(map, { 
      [item[prop]] : t(item) 
      }), {}); 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springyui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/springy/2.7.1/springy.min.js"></script>
<canvas width="400" height="200" />

＆＃13;

用于以无重叠方式呈现节点网格的算法方法

1 个答案: