Невозможно добавить Bootstrap Popover в текстовый тег в приложении d3

Question

Цель этого фрагмента - открыть всплывающее окно с диаграммой при щелчке по слову. График по-прежнему не включен в popover, но я собираюсь сделать шаг за шагом.

var childText = svg.selectAll("childText") 
     .data(...) 
     .enter().append("text") 
     .attr("class", "btn btn-lg btn-danger") 
     .attr("x", "...") 
     .attr("y", "...") 
     .attr("font-size", "...") 
     .attr("fill", "...") 
     .attr("role", "button") 
     .attr("data-content", "it works!") 
     .attr("data-trigger", "focus") 
     .attr("data-toggle", "popover") 
     .attr("title", "graph") 
     .attr("data-content", "yi boi") 
     .attr("tabindex", "0") 
     .text("...") 

$(document).ready(function() { 
    $('[data-trigger="focus"]').popover({'show':true}); 
}); 

HTML работает без каких-либо ошибок, но когда я нажимаю на слово, ничего не происходит. Я заметил, что в элементе создается определенный атрибут (aria-describeby = "popover900071"), когда я нажимаю на слово. Это единственное изменение, которое не происходит, не появляются ни всплывающие окна, ни ошибки.

Версии, используемые:

Бутстрап: 3.3.7

d3: 3.5.0

(другие библиотеки используются) с3: 0.4.11, JQuery: 3.1.1

Документация по ботстрапу: http://getbootstrap.com/javascript/#popovers

TL; DR: Попытка использовать popover из Bootstrap в приложении d3, popover не появляется и никаких ошибок не генерируется.

Answer 1

Im не на 100% уверен в интеграции бутстрапа, но если вы ищете что-то подобное, вы можете использовать этот нижеприведенный пример подсказки. Он функционирует точно так же, как popover, и вы всегда можете изменить CSS, который я предоставил, чтобы он выглядел более похожим на bootstrap. Я лично считаю, что mouseover и mouseout более удобны для пользователя, чем щелчок, но вы всегда можете легко изменить эту часть.

sunburst example with tooltip

Первый включает тег ниже сценария:

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> 

создать следующий CSS:

.d3-tip { 
    line-height: 1; 
    font-weight: bold; 
    padding: 12px; 
    background: rgba(0, 0, 0, 0.8); 
    color: #fff; 
    border-radius: 2px; 
} 

/* Creates a small triangle extender for the tooltip */ 
.d3-tip:after { 
    box-sizing: border-box; 
    display: inline; 
    font-size: 10px; 
    width: 100%; 
    line-height: 1; 
    color: rgba(0, 0, 0, 0.8); 
    content: "\25BC"; 
    position: absolute; 
    text-align: center; 
} 

/* Style northward tooltips differently */ 
.d3-tip.n:after { 
    margin: -1px 0 0 0; 
    top: 100%; 
    left: 0; 
} 

В файле JS включают следующее:

var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function(d) { 
    return "**value of string**"; 
    }) 

После инстанцирования вашего вызова переменной SVG в всплывающей подсказке с:

svg.call(tip); 

Наконец, добавьте следующие строки в элемент, который вы хотите отобразить:

.on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 

Там у вас есть.