2

在我的项目中，我试图在 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 和 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>
4

1 回答 1

2

问题不在于 d3。

问题在于醉醺醺的。

在这里，我在git中使用相同的醉酒 js

它工作得很好。

所以问题是您可能正在使用一些旧的错误版本的tipsy。

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

工作代码在这里

希望这可以帮助！

于 2015-12-12T05:03:52.423 回答