d3アプリケーションのテキストタグにブートストラップポップオーバーを追加できません

Question

このスニペットの目的は、単語がクリックされたときにグラフでポップアップを開くことです。グラフはまだポップオーバーには含まれていませんが、一度に1ステップずつ進んでいます。

HTMLはエラーをスローせずに動作しますが、単語をクリックすると何も起こりません。私は単語をクリックすると、特定の属性（aria-describedby = "popover900071"）が要素の内部に生成されていることに気付きます。これが唯一の変化です。ポップオーバーやエラーは表示されません。使用

バージョン：

ブートストラップ：3.3.7

D3：3.5.0

（他のライブラリを使用）C3：0.4.11、jQueryの：3.1.1

ブートストラップポップオーバー文書：http://getbootstrap.com/javascript/#popovers

TL; DR：d3アプリケーションでブートストラップからpopoverを使用しようとしましたが、ポップオーバーが表示されず、エラーも生成されませんでした。

Answer 1

私は100％ブートストラップ統合については確信していませんが、類似のものをお探しの場合は、ツールチップの例の下でこれを使用できます。これはポップオーバーとまったく同じように機能し、私が提供したCSSを変更して、ブートストラップと似ているようにすることができます。私は個人的にマウスオーバーやマウスアウトがクリックよりもユーザーフレンドリーであると感じていますが、あなたはいつもその部分を非常に簡単に変更することができます。

sunburst example with tooltip

まず以下のスクリプトタグを含める：

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

次のCSSを作成：あなたのJSファイルで

.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; 
} 

は、次のものがあります

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

あなたのSVG変数をインスタンス化した後にツールチップを呼び出す：あなたはそれを持ってあり

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

：

svg.call(tip); 

最後に、あなたが表示したい要素に以下を追加します。