我正在努力让我的vis图承担显示我的应用程序的数据库和操作数据库的双重任务。 -------------------------------------------------------------------------------------------------------------------------------------------------------我可以想到的几种形式之一。
1) 一个弹出式菜单的解决方案 我一直在尝试使用工具提示弹出，并认为我可以使这些工作，但工具提示在vis中无法显示（"你找到了我 "不会弹出下面描述的节点）。 StackOverflow(SO)的一个帖子指出，工具提示在vis .css中默认设置为隐藏。 我试着在我的服务器上创建我自己的.css副本，这样我就可以改变这个默认值，但我的页面在我的版本中难以正常工作。 暂时抛开正确配置自定义的.css不谈，我不能以程序化的方式启用工具提示的可见性吗？ 我知道如何通过jQuery改变一个元素的属性，但不知道该引用哪个元素，也不知道.css的角度是否会增加超出我经验的复杂度。
nodeSet.push({id:"47",
label:"some object type",
font:{color: 'purple'},
title:"<span id='nodeManipulation'>you found me</span>",
url:"/BackToTech/server?function=viewGraph&NodeID=47"});
2）在编辑窗格中征用添加按钮。 我用删除按钮成功地做到了这一点，但添加按钮在到达用户提供的功能之前，会做一些预行为，这是有干扰的。 我想要的顺序是
实际发生的情况是。
我提供的代码不能告诉你要做一个什么对象类型的实例。
addNode: function(nodeData,callback) {
var selected = network.getSelectedNodes();
if (selected.length > 1) {
alert("narrow your selection down to one type.");
return;
} else if (selected.length < 1) {
alert("select a type first.");
return;
} else {
var node = nodes.get(selected[0]);
createInstance(node);
}
//nodeData.label = 'hello world';
//callback(nodeData);
}
3）在编辑栏中添加我自己的按钮。这将是明天的尝试。 我把它留到最后，因为有很多关于vis的.js和.css ，虽然我很欣赏它们，但对我来说就像一个黑盒子。我预计我的版本会不美观，或者与原生按钮混杂在一起有不可预见的不良交互。如果我感到困惑，我会添加更多具体的描述，但目前欢迎我的更有经验的兄弟们提供任何关于需要注意的建议或类似的例子。
虽然我还是希望有一天能有工具提示，但我还是让#3工作了。 一些隐藏的后处理重置了编辑栏，并在 "selectNode "处理程序中清除了我的按钮添加，尽管所有的操作函数都设置为false。 添加延迟是我的变通办法。 接下来我将添加一个导航按钮，并在取消选择事件上删除所有的按钮。
network.on("selectNode", function (params) {
setTimeout(function(){
var manipulationBar = $(".vis-manipulation");
$("<div>")
.attr("class", "vis-button")
.attr("id", "myAdd")
.attr('onclick', "addNode()")
.attr('style', 'display: block; white-space:nowrap;align-items: center')
.appendTo(manipulationBar);
$('<img>')
.attr('src', "https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/img/network/addNodeIcon.png")
.attr('height',"20")
.attr('style', "vertical-align: baseline")
.appendTo($("#myAdd"));
$("<span>")
.attr("class", "vis-label")
.attr("style", "text-align: center; font-size:20px")
.text("Add New")
.appendTo($("#myAdd"));
$("<div>")
.attr("class", "vis-separator-line")
.appendTo(manipulationBar);
$("<div>")
.attr("class", "vis-button")
.attr("id", "myDelete")
.attr('style', 'display: block; white-space:nowrap;align-items: center')
.attr('onclick', "deleteNode()")
.appendTo(manipulationBar);
$('<img>')
.attr('src', "https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/img/network/deleteIcon.png")
.attr('height',"20")
.appendTo($("#myDelete"));
$("<span>")
.attr("class", "vis-label")
.attr("style", "text-align: center; font-size:20px")
.text("Delete")
.appendTo($("#myDelete"));
}, 100);
});