从 cytoscape.js 中的节点对象获取 svg 元素

Question

我想在节点鼠标悬停时显示一个工具提示（通过使用qtip）。为了在

cy.nodes().bind("mouseover", function() { ... } 

我需要将工具提示绑定到某个 svg 元素。我在节点的公共接口上找不到会返回 svg 元素来执行此操作的函数，也找不到可以在初始化期间直接将属性添加到单个节点 svg 元素的方法。 Cy 当然有这个 svg 信息存储在它的 _private 中。当然，我可以通过调用 node.position() 找到 svg 元素，然后搜索相应的 svg 元素，但是有没有更简洁的方法可以直接从节点对象接口获取它？

编辑：Atanas 的建议有效，但我不确定它是否是永久解决方案。我希望在 mouseout/zoom/pan/grab/select/.. 上禁用工具提示，这意味着我需要绑定

$(".ui-tooltip").qtip('hide');

到 cy 上的那些事件。我宁愿依靠 qtip 事件和延迟显示工具提示。现在工具提示似乎有点错误，因为它会立即隐藏在这些事件中。

Answer 1

出于性能原因，Cytoscape.JS 最近更新为使用 HTML5 Canvas 渲染器。 （这大约发生在 2012 年 8 月至 9 月）

获取节点悬停的事件位置在当前测试版中并未完全实现，但它似乎是一个非常重要的功能。

您可以通过在 Javascript 控制台中输入以下内容来确认实施状态：

cy.nodes().bind("mouseover", function(e) {console.log(e)})

这个功能应该很快就会实现。

Answer 2

我最近或多或少做了同样的事情——在节点上显示 qtips——而且它有效。这是我的代码，希望对您有所帮助：

    cy.nodes().bind("mouseover", function(oEvent){
        var eid = this.data("id");

        $qtipDiv.css({
            "left": oEvent.clientX,
            "top": oEvent.clientY,
        });

        var menutext = "some text to be shown in tooltip";

        $qtipDiv.qtip({
            content: {
                text: menutext
            },
            show: {
                delay: 0,
                event: false,
                ready: true,
                effect: false
            },
            position: {
                viewport: true,
                adjust: {
                    method: "shift"
                }
            },
            style: {
                classes: "ui-tooltip-tipsy"
            }
        });
    });