Получение Tipsy для работы с D3 и ручными триггерами

В моем проекте я пытаюсь объединить "переключение" всплывающего окна Tipsy в расклад D3. По сути, я хочу иметь возможность нажимать на изображения, показывать там всплывающее окно и разрешать пользователю некоторое взаимодействие. Если пользователь закончил, он либо щелкает другое изображение, либо закрывает его, нажимая то же изображение.

Часть кода 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, пытался связать onclick из jQuery вместо D3 и т. Д. До сих пор все с одинаковым поведением.

Может кто-нибудь сказать мне, что мне не хватает?

Минимальный контрольный пример

Простой минимальный тестовый пример 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>

1 ответ

Решение

Проблема не с d3.

Проблема с навеселе.

Здесь я использую тот же типсы JS в Git

И это прекрасно работает.

Таким образом, проблема в том, что вы можете использовать какую-то старую версию с ошибками.

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

Код здесь

Надеюсь это поможет!

Другие вопросы по тегам