с помощью qtip2 tooltip с d3.js

Question

Я d3.js newby, и я работаю с treemap example. Исходный пример показывает всплывающую подсказку при зависании определенного раздела. Вместо этого я хотел бы использовать подсказку qtip2.

В d3.js примере следующие строки используются для добавления всплывающей подсказки по умолчанию т.е. путем установки заголовка атрибут:

g.append("rect") 
    .attr("class", "parent") 
    .call(rect) 
    .append("title") 
    .text(function(d) { return "total: " + formatNumber(d.value); }); 

Сайт qtip2 предполагает линию (JQuery)

$('[title]').qtip(); 

заменит всплывающую подсказку по умолчанию на вариант qtip2. Однако он нигде не появляется. Так я должен это назвать?

Я был в состоянии произвести qtip2 всплывающую подсказку, добавив класс Прямоугольник элементов, например, так

g.append("rect") 
    .attr("class", "parent") 
    .classed({'QTIP2': true}) 
    .call(rect) 
    .append("title") 
    .text(function(d) { return "total: " + formatNumber(d.value); }); 

с последующим

$('rect.QTIP2').qtip({ 
    content: 'Total number of hits:' + "some value", 
    position: {my: 'center', at: 'center'}, 
    style: {width: 75, classes: 'qtip-dark qtip-shadow'}, 
      show: { effect: function(offset) {$(this).fadeIn(500);}}   
}); 

Однако, я не знаю, как изменить строка «некоторое значение» по фактическому значению d, используемому в d3. Я немного знаком с свойствами d3.select (this), datum() и __data__, но мне не удалось заставить его работать. Строка $ ('rect.QTIP2'). Text() также дала некоторые результаты, однако это дало значения для всех прямоугольников, а не только тот, который вы наводили.

Любая помощь очень ценится!

Answer 1

$('[title]').qtip(); линия не работает, потому что он ищет элемент, который имеет атрибут "title" (как в HTML), вместо того, чтобы искать элемент, который имеет дочерний элемент <title> (который, как заголовки обрабатываются в SVG). Поэтому селектор не возвращает никаких элементов, и всплывающие подсказки не создаются. Как вы обнаружили, если ваш селектор JQuery действительно возвращает действительные элементы, вы можете заставить qtip работать.

Чтобы получить доступ к данным, вам понадобится войти в nitty-gritty. Данные d3 сохраняются в свойстве элемента __data__. Метод JQuery для доступа к свойствам элемента (которые являются не такими же, как и атрибуты элементов) - .prop(propertyName).

Так что ваш код будет что-то вроде

$('rect.QTIP2').qtip({ 
    content: { 
     text: function(event, api) { 
       return 'Total number of hits:' + 
        formatNumber($(this).prop("__data__").value); 
       } 
     }, 
    position: {my: 'center', at: 'center'}, 
    style: {width: 75, classes: 'qtip-dark qtip-shadow'}, 
    show: { effect: function(offset) {$(this).fadeIn(500);}}   
}); 

(Обновлено: это, кажется, правильный способ сделать qtip content становится функцией отдельного элемента запускающего его.)

Если это становится запутанным , вы можете проверить подключаемый модуль d3-tip, который использует стиль d3 для обратных вызовов function(d,i){} для форматирования всплывающих подсказок на основе данных элемента и индекса.