关于力定向图的信息，在节点上弹出窗口

Infovis force directed graph, popup window on node

本文关键字：节点 窗口 于力定 信息      更新时间：2023-09-26

嗨，如果有任何infovis用户，他们可能会提供帮助，我是一个infovis noob，刚刚建立并运行了我的力导向图，通过Json传递我的节点，不管怎样，我可以修改每个节点的弹出信息窗口吗，就像人们在谷歌地图上点击标记时看到的那样，我已经在圆圈里转了几个小时了。

谢谢。

以下是我尝试将图像附加到每个节点，但仍然无法使其工作：

onCreateLabel: function(domElement, node) {
      var actionElem;
      var link = document.createElement('a');
      var frame = document.createElement('div');

      actionElem = document.createElement('img');
      // http://promote.opera.com/logos/Opera-icon-high-res.png
      //actionElem.src = photoUrls[node.id];
      actionElem.src = 'http://promote.opera.com/logos/Opera-icon-high-res.png';
      actionElem.className = 'profilePicture';
      //actionElem.onclick = function() { nodeOnClick(node) };
      link.href = '/' + node.id;
      link.className = 'link';
      link.target = '_blank';
      link.innerHTML = node.name;
      frame.className = 'detailFrame';
      frame.appendChild(actionElem);
      frame.appendChild(document.createElement('br'));
      frame.appendChild(link);
      domElement.appendChild(frame);
},

您可以通过以下操作向节点添加图像：

onCreateLabel: function(label, node){
label.innerHTML = "<div><img src='/images/node.png'/></div>;
}

要添加唯一的图像，您可以在json:中输入图像名称

onCreateLabel: function(label, node){
label.innerHTML = "<div><img src='/images/"+node.data.image+"'/></div>;
}

如果您希望图像出现在悬停节点时出现的弹出窗口中，则可以使用"提示"。在初始化可视化时添加以下代码（例如，强制）。

 Tips: {
          enable: true,
          onShow: function(tip, node) {
            tip.innerHTML = "<div class='"tip-title'"> <img src = "your-image-url"  >" +   "</div>" ;
          }
        }
相关文章：