How to customize the tooltip in d3plus.full.js for rings?

Question

I'm trying the d3plus charts in a project where I need to customize the tooltip which appears on right top corner for rings. This D3PLUS Example

I have connection with an extra field as follows

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

I want to list the grade as a bullet point under each source.

I tried a lot by reverse engineering the d3plus.full.js but no success. Is it possible by any means?

Answer 1

You can easily do it by jquery. On document ready select the .class and add element. The example below is on click of a button like below:

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