javascript - 为什么使用 Tipsy 会破坏我由 d3 生成的力导向图？

Question

我正在尝试将 Tipsy 悬停弹出窗口添加到我的 3 个节点的简单力导向图中。

但是，添加 Tipsy javascript 似乎会使我的 javascript 崩溃：http: //goo.gl/BeYls

Chrome Web 开发者控制台说明：

未捕获的类型错误：对象 [object SVGCircleElement]、[object SVGCircleElement]、[object SVGCircleElement] 没有方法“tipsy”

我确信没有 Tipsy 代码的应用程序的其余部分可以工作（因为取出第 78-85 行修复了应用程序），并且我已经包含了 javascript 文件。

具体来说，这是我编写的用于将 Tipsy 弹出窗口添加到 DOM 中的每个节点的代码。

  node.tipsy({  
    gravity: 'w', 
    html: true, 
    title: function() {
    var d = this.__data__, n = d.name;
        return 'Hi there! My name is <b>' + n + '</b>'; 
    }
  });

为什么会破？节点不是 DOM 元素吗？

Answer 1

Tipsy 是一个 jquery 插件。您需要将其应用于 jquery 选择器，而不是 d3 选择器。由于您的圈子具有 css 类“节点”，因此应该可以：

$(".node").tipsy({ ... });