vis.js - 如何只保留两个节点之间的边?
问题描述
我有跟随图表。在我的示例中,我只需要保留两个节点之间的年龄Company 5
。Company 7
喜欢:
我找不到任何示例的问题。有人可以帮助我吗?
现场示例:https ://jsfiddle.net/5ntzqafv/
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Company 1', group: "company", },
{id: 2, label: 'Mike', group: "owner"},
{id: 3, label: 'David', group: "founder"},
{id: 4, label: 'Company 2', group: "company"},
{id: 5, label: 'Company 3', group: "company"},
{id: 6, label: 'Company 4', group: "company"},
{id: 8, label: 'Company 5', group: "company", borderWidth: 4, color: { border: '#077eb8' }, font: { size: 16},},
{id: 9, label: 'Company 6', group: "company"},
{id: 10, label: 'Company 7', group: "company", borderWidth: 4, color: { border: '#077eb8' }, font: { size: 16},},
{id: 11, label: 'Company 8', group: "company"},
{id: 12, label: 'Company 9', group: "company"}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 11},
{from: 3, to: 4},
{from: 4, to: 3},
{from: 2, to: 8},
{from: 3, to: 6},
{from: 3, to: 5},
{from: 4, to: 9},
{from: 7, to: 4},
{from: 7, to: 12},
{from: 10, to: 12},
{from: 9, to: 12},
{from: 4, to: 10}
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {nodes: {
shape: "box",
widthConstraint: {
maximum: 200
}
}};
var network = new vis.Network(container, data, options);
解决方案
您可以只使用一些简单的算法来搜索图中的路径,例如 BFS。
算法在这里描述:https ://en.wikipedia.org/wiki/Breadth-first_search
我的实现:https ://jsfiddle.net/alexey_kuldoshin/3svmqujz/74/
function getPath(graph, from, to) {
let queue = [ from ];
let p = {};
p[from] = -1;
while (queue.length > 0) {
let v = queue.shift();
if (v == to) {
break;
}
graph[v].forEach(edge => {
if (!(edge in p)) {
p[edge] = v;
queue.push(edge);
}
});
}
let ans = [];
while (to != -1) {
ans.push(to);
to = p[to];
}
console.log(ans);
return ans;
}
推荐阅读
- python - Django + tox:应用程序尚未加载
- google-apps-script - 从没有有限行定义的工作表发送非重复电子邮件
- angular - 等待订阅在 Angular 中完成
- java - 如何将屏幕保护程序添加到我的 javafx 应用程序?
- node.js - 如何在mongodb中实现like查询
- php - 未连接:Mac 上的潜在安全问题 laravel localhost
- reactjs - 如何使用带有 react redux 的 typescript 调用组件中的操作?
- jquery - 如何将生成的 graphviz svg 缩放到特定节点并滚动到元素?
- angular - 从具有特殊字符的 Url 角度获取参数
- c# - 将元素列表与另一个双打列表排序