【问题标题】:Infovis force directed graph, popup window on nodeInfovis 强制有向图,节点上的弹出窗口
【发布时间】:2013-02-07 16:47:59
【问题描述】:

嗨,如果那里有任何 infovis 用户,他们可能会提供帮助,我是一个 infovis 菜鸟,我刚刚启动了我的强制定向图并运行通过 Json 传入我的节点,无论如何我可以修改每个弹出信息窗口单击标记时可能会在 Google 地图上看到的节点,我已经绕圈子转了几个小时。

谢谢。

这是我尝试将图像附加到每个节点的尝试,但仍然无法正常工作:

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);
},  

【问题讨论】:

  • 嗯在这个阶段尝试了很多东西,几乎在那里我想我认为有人可能有一个可行的例子,我已经创建了一个现在触发的点击功能,我也在尝试追加现在每个节点都有一个独特的图像。
  • 问题已修正,尝试将图像附加到每个节点。

标签: javascript infovis


【解决方案1】:

您可以通过执行以下操作将图像添加到节点:

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>;
}

【讨论】:

    【解决方案2】:

    如果您希望图像出现在您悬停节点时出现的弹出窗口中,那么您可以使用“提示”。初始化可视化时添加以下代码(例如强制定向)。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-01-19
      • 2018-02-27
      • 1970-01-01
      • 2013-01-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多