無法在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-describedby =「popover900071」）在元素內部生成，因爲我點擊該單詞。這是唯一發生的變化，沒有彈出窗口，也沒有錯誤出現。使用

版本：

自舉：3.3.7

D3：3.5.0

（使用其它的庫）C3：0.4.11，jQuery的：3.1.1

Bootstrap popover文檔：http://getbootstrap.com/javascript/#popovers

TL; DR：試圖在d3應用程序中使用Bootstrap的彈出窗口，彈出窗口不會出現，並且不會生成錯誤。

Answer 1

我不是百分百確定引導集成，但如果你正在尋找類似的東西，你可以使用下面的工具提示示例。它的功能和popover完全一樣，你可以隨時改變我提供的CSS，使它看起來更像自舉。我個人覺得mouseover和mouseout比點擊更方便用戶使用，但是您可以隨時更改該部分的內容。

sunburst example with tooltip

首先包括以下script標籤：

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

有你有它。