Question

在我的项目中，我试图在D3力量布局中组合'切换'一个Tipsy弹出窗口。基本上我希望能够点击图像，在那里显示弹出窗口并允许用户进行一些交互。如果用户已完成，则可以单击另一个图像，也可以通过单击相同的图像将其关闭。

代码的D3部分在强制布局中执行一些图像渲染。基本上代码是这样的：

var node = vis.selectAll("circle.node")
                .data(data.nodes)
                .enter().append("svg:image")
                .attr("class", "node")
                .attr("xlink:href", function (d) { return d.icon; })
                .attr("x", function (d) { return d.x - 12; })
                .attr("y", function (d) { return d.y - 12; })
                .attr("width", '24px')
                .attr("height", '24px')
                .style("fill", function (d) { return fill(d.group); })

可以在此处找到Tipsy的链接：http://onehackoranother.com/projects/jquery/tipsy/#。为了直截了当，我测试了它：

$('.node').tipsy({
    gravity: 'w',
    opacity: 1,
    html: true,
    title: function () {
        var d = this.__data__, icon = d.icon;
        return '<img src="' + icon + '" style="width: 100px; height:100px;"/>;
    }
});

到目前为止一切顺利;使用此代码，如果你悬停，它将全部工作。

上次调整时，我已将trigger: 'manual'添加到Tipsy的选项中，并向D3节点添加了一些代码：

// this variable is declared on top somewhere:
var prev = null;

// and to the D3 code, this is added:

                .on("click",
                    function () {
                        if (this == prev)
                        {
                            $(this).tipsy("hide");
                            prev = null;
                        }
                        else
                        {
                            // show
                            if (prev != null) {
                                $(prev).tipsy("hide");
                            }
                            $(this).tipsy("show");
                            prev = this;
                        }
                    });

正如您所看到的，代码密切反映了http://onehackoranother.com/projects/jquery/tipsy/#上的代码（部分：手动触发工具提示）。

现在，如果我们运行此代码，它突然不再起作用了。仔细观察后，我注意到在Tipsy代码中，问题出现在这篇文章中：

    } else if (typeof options == 'string') {
        console.debug(this); // added some debug info
        var tipsy = this.data('tipsy');
        if (tipsy) tipsy[options]();
        return this;
    }

运行此代码时，我发现this.data('tipsy')始终为undefined。但是，所选的元素似乎是正确的。

我看过其他SO帖子，到目前为止没有运气。一些人建议，我已经尝试了不同版本的jQuery，试图用jQuery而不是D3来绑定onclick等等。到目前为止，所有这些都有相同的行为。

有人可以告诉我我错过了什么吗？

最小的测试用例

一个简单的最小测试案例Tipsy＆amp;这项工作所基于的D3可以在以下链接中找到：http://bl.ocks.org/ilyabo/1373263。 html代码可以替换为：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="jquery.tipsy.js"></script>
    <link href="tipsy.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript">

      var w = 800, h = 500;      
      var colors = d3.scale.category20();

      var vis = d3.select("#chart").append("svg:svg")
          .attr("width", w)
          .attr("height", h);

      var data = d3.range(20).map(function(i) { 
        return { i:i, x:Math.random()*w, y:Math.random()*h, r:Math.random()*30 } 
      });

    var prev = null;

      vis.selectAll("circle")
         .data(data)
       .enter().append("svg:circle")
         .attr("stroke", "black")
         .attr("fill", function(d, i) { return colors(i); })
         .attr("cx", function(d, i) { return d.x; })
         .attr("cy", function(d, i) { return d.y; })
         .attr("r", function(d, i) { return d.r; })
         .on("click",
                                function () {
                                    if (this == prev)
                                    {
                                        $(this).tipsy("hide");
                                        prev = null;
                                    }
                                    else
                                    {
                                        if (prev != null)
                                        {
                                            $(prev).tipsy("hide");
                                        }
                                        $(this).tipsy("show");
                                        prev = this;
                                    }
                                });

      $('svg circle').tipsy({ 
        trigger: 'manual',
        gravity: 'w', 
        html: true, 
        title: function() {
          var d = this.__data__, c = colors(d.i);
          return 'Hi there! My color is <span style="color:' + c + '">' + c + '</span>'; 
        }
      });

    </script>

  </body>
</html>

Answer 1

问题不在于d3。

问题在于醉意。

在这里，我在git

中使用相同的技巧js

它完美无缺。

所以问题是你可能正在使用一些古老的错误版本的软件。

//setting the tipsy to all circles in svg
$('svg circle').tipsy({
      trigger: 'manual',
      gravity: 's',
      html: true,
      title: function() {
        var d = d3.select(this).data(),
          c = colors(d.i);
        return 'Hi there! My color is <span style="color:' + c + '">' + c + '</span>';
      }
    });

SVG圈子点击事件显示隐藏醉手动

.on("click",
        function() {
          if (this == prev) {
            $(this).tipsy("hide");
            prev = null;
          } else {
            if (prev != null) {
              $(prev).tipsy("hide");
            }
            $(this).tipsy("show");
            prev = this;
          }
        });

Wrking代码here

希望这有帮助！

获得使用D3和手动触发器的Tipsy

1 个答案: