d3plus.full.jsのツールチップをカスタマイズするには？

Question

私はリングの右上隅に表示されるツールチップをカスタマイズする必要があるプロジェクトでd3plusチャートを試しています。このD3PLUS Example

var connections = [ { "source": "alpha", "target": "beta", "strength": 200, "grade":"A" }, { "source": "alpha", "target": "gamma", "strength": 10, "grade": "A" }, { "source": "beta", "target": "delta", "strength": 5, "grade": "B" }, { "source": "beta", "target": "epsilon", "strength": 1.563, "grade": "B" }, { "source": "zeta", "target": "gamma", "strength": 3.125, "grade": "A" }, { "source": "theta", "target": "gamma", "strength": 0.732, "grade": "A" }, { "source": "eta", "target": "gamma", "strength": 2.063, "grade": "B" } ]

を次のように私は、各ソースの下の箇条書きとしてgradeを一覧表示したい余分なフィールドとの接続を持っています。

私はd3plus.full.jsをリバースエンジニアリングして多くの試みを行いましたが、成功しませんでした。それはどんな手段でも可能ですか？

Answer 1

jqueryで簡単に実行できます。 document準備完了select.classと要素を追加します。下の例は、以下のようなボタンをクリックすると表示されます：

$(document).ready(function(){ 
$("#btn").on('click',function(){ 
     console.log("Hello"); 
     $(".d3plus_tooltip_focus_link").each(function (indx) { 
      console.log(indx + " : " + $(this).text()); 
     });   
    }); 
});