Wie kann ich den Tooltip in d3plus.full.js für Ringe anpassen?

Question

Ich versuche die d3plus-Diagramme in einem Projekt, wo ich den Tooltip anpassen muss, der in der rechten oberen Ecke für Ringe angezeigt wird. Diese D3PLUS Example

Ich habe Verbindung mit einem zusätzlichen Feld als

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" } ]

folgt ich die grade als Aufzählungspunkt unter jeder Quelle auflisten möchten.

Ich habe viel versucht durch Reverse Engineering der d3plus.full.js, aber kein Erfolg. Ist das möglich?

Answer 1

Sie können es einfach tun, indem Sie jquery. Auf document bereit select die .class und Element hinzufügen. Das Beispiel unten ist auf einen Knopf wie folgt:

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