将我自己的功能添加到 V.js 网络中

Question

我正在努力使我的可视化图在显示应用程序的数据库和操作它方面承担双重职责。 我坚持添加新的对象实例，而我只需要一个---期望的结果！---可以采取我能想到的几种形式之一：

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，虽然我很欣赏它们，但这对我来说就像一个黑匣子。我预计我的版本是不美观的和/或与本机按钮混合的不可预见的不良交互。如果我感到困惑，我会添加更具体的描述，但目前欢迎我更有经验的弟兄们就要注意什么或类似的例子提供任何建议。

Answer 1

虽然我仍然希望有一天有工具提示，但我得到了#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);
});