Looking to enhance my D3 Js Sankey diagram by adding a donut chart around the company circles. The donut chart will display two values, numsms and nummid, within the company node. Below is an example of what I am trying to achieve:
However, I've been struggling to implement the donut chart around the company circles. Most examples I found show donut charts as separate SVG elements.
Here is a snippet of my code for the circles:
svg.selectAll(".node.circle")
.append("circle")
.attr("r", function(d) {
if(d.node.indexOf("company-") > -1) {
return company_circle_size(d);
} else {
return page_circle_size(d);
}
})
// More circle styling and attributes
To target the company nodes, I update the class names in a loop:
$(selector).attr("class", "node company")
I believe the code snippet below should be placed within this section to create the donut chart around the company nodes:
svg.selectAll('.company').each(function(companyNode) {
var values = [[companyNode.numsms, companyNode.nummid]];
var total = companyNode.numsms + companyNode.nummid;
if(total > 0) {
// create donut chart
}
});