Readme.md

Hi, I am working on sunburst where I got the following issue. Some of the nodes are not visible clearly that it is overlapped by other nodes. Could someone help me to fix it?

sunburst.js

function LoadSunburst(rootdata, itr, width, parentdiv) {
    //var height = width;
    var height = 500;
    width = 650;
    var radius = Math.min(width, height) / 2;

    // radius = 200;
    //console.log("w= " + width + " h= " + height + " r= " + radius);
    var padding;
    var duration;
    x = d3.scale.linear().range([0, 2 * Math.PI]),
        y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
        //x = d3.scale.linear().range([0, width/2]),
        //y = d3.scale.linear().range([0, radius]);
        padding = 5,
        duration = 1000;
    var colorcode = 2;

    var color = d3.scale.category20b();


    var divelement = document.createElement('div');


    divelement.id = 'div' + itr.toString();
    $(divelement).addClass('listburst')
        .appendTo(parentdiv)

    var imageelement = document.createElement('div');
    $(imageelement).addClass('imgclass').appendTo('#' + divelement.id).on("mouseover", mouseoverimg)
        .on("mouseout", mouseoutimg);
    $(imageelement).html($('.divimage').html());

    var spanelement = document.createElement('span');
    $(spanelement).html(rootdata.header).addClass('spnclass').appendTo('#' + divelement.id);


    var tipLinks = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0]);



    var div = d3.select('#' + divelement.id);
    div.select("img").remove();

    var svg = d3.select('#' + divelement.id).append("svg")
        .attr("width", width + padding * 2)
        .attr("height", height + padding * 2)
        .append("g")
        .attr("transform", "translate(" + [radius + padding, radius + padding] + ") rotate(-90 0 0)");


    var partition = d3.layout.partition()
        .sort(null)
        
        .value(function (d) { return 5.8 - d.depth; });

    //d3.svg.arc(function(d) {

    //})
    //var partition = d3.layout.partition()
    //    .size([2 * Math.PI, radius * radius])
    //    .value(function (d) { return d.size; });
    var arc = d3.svg.arc()
        .startAngle(function (d) {
            var tempx = Math.max(0, Math.min(2 * Math.PI, x(d.x)));
            //return Math.max(0, Math.min(4 * Math.PI, x(d.x)));
            return tempx;
        })
        .endAngle(function (d) {
            var tt = Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
            //return Math.max(0, Math.min(4 * Math.PI, x(d.x + d.dx)));
            return tt;
        })
        .innerRadius(function (d) { return Math.max(0, y(d.y)); })
        .outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); });

    //.startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    //.endAngle(function (d) { return Math.max(0, Math.min(4 * Math.PI, x(d.x + d.dx))); })
    //.innerRadius(function (d) { return Math.max(0, d.y ? y(d.y) : d.y); })
    //.outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); });



    //var arc = d3.svg.arc()
    //    .startAngle(function (d) { return d.x; })
    //    .endAngle(function (d) { return d.x + d.dx; })
    //    .innerRadius(function (d) { return Math.sqrt(d.y); })
    //    .outerRadius(function (d) { return Math.sqrt(d.y + d.dy); });



    var root = JSON.stringify(rootdata.datalist);
    root = JSON.parse(rootdata.datalist);

    //var nodes = partition.nodes({ root })[0].root;
    var nodes = rootdata.datalist;



    var g = svg.selectAll("g")
        .data(partition.nodes(root))
        .enter().append("g");

    var path = g.append("path")
        .attr("id", function (d, i) { return "path-" + i; })
        .attr("d", arc)
        .attr("fill-rule", "evenodd")
        .style("fill", fncolors)
        .on("click", click)
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);



    var textEnter = g.append("text")
        .style("fill-opacity", 1)
        .style("fill", function (d) {
            return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000";
        })
        .attr("text-anchor", function (d) {
            return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
        })
        .attr("dy", ".2em")
        .attr("transform", function (d) {
            var multiline = (d.name || "").split(" ").length > 1,
                angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
                rotate = angle + (multiline ? -.5 : 0);
            // rotate = angle;
            return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";

            // return "rotate(" + angle + ")translate(" + (y(d.y) + padding) + ")";
        })
        //.attr("transform", function (d) {
        //    return "rotate(" + computeTextRotation(d) + ")";
        //})
        .on("click", click);
    textEnter.append("tspan")
        .attr("x", 0)
        .text(function (d) {
            //console.log("dep= " + d.depth + " name= " + d.name.split(" ")[0]);
            var names = d.name.split('~');
            return d.depth ? names != undefined && names[0] === "jobid" ? "" : d.name.split(" ")[0] : "";
        });

    //textEnter.append("tspan")
    //    .attr("x", 0)
    //    .attr("dy", "1em")
    //    .text(function (d) { console.log("dep= " + d.depth + " name= " + d.name.split(" ")[1]); return d.depth ? d.name.split(" ")[1] || "" : ""; });
    //change above code to replace the outer ring text



    function computeTextRotation(d) {
        var angle = x(d.x + d.dx / 2) - Math.PI / 2;
        return angle / Math.PI * 180;
    }



    function fncolors(d) {
        var colr = color(colorcode++);
        return colr;
    }

    var content = d3.select("#col2");





    d3.select(self.frameElement).style("height", height + "px");


    function click(d) {
        path.transition()
            .duration(duration)
            .attrTween("d", arcTween(d));
        // Somewhat of a hack as we rely on arcTween updating the scales.
        textEnter.style("visibility", function (e) {
                return isParentOf(d, e) ? null : d3.select(this).style("visibility");
            })
            .transition()
            .duration(duration)
            .attrTween("text-anchor", function (d) {
                return function () {
                    //console.log("d.x= " + d.x);
                    //console.log("d.dx= " + d.dx);
                    return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
                };
            })
            .attrTween("transform", function (d) {
                var multiline = (d.name || "").split(" ").length > 1;
                return function () {
                    var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,

                        rotate = angle + (multiline ? -.5 : 0);
                    return "rotate(" + angle + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
                };
            })
            .style("fill-opacity", function (e) { return isParentOf(d, e) ? 1 : 1e-6; })
            .each("end", function (e) {
                d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
            });
    }
    //});
    function isParentOf(p, c) {
        if (p === c) return true;
        if (p.children) {
            return p.children.some(function (d) {
                return isParentOf(d, c);
            });
        }
        return false;
    }
    function colour(d) {
        if (d.children) {
            // There is a maximum of two children!
            var colours = d.children.map(colour),
                a = d3.hsl(colours[0]),
                b = d3.hsl(colours[1]);
            // L*a*b* might be better here...
            return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.l / 1.2);
        }
        return d.colour || "#fff";
    }
    // Interpolate the scales!
    function arcTween(d) {
        var my = maxY(d),
            xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
            yd = d3.interpolate(y.domain(), [d.y, my]),
            yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
        return function (d) {
            return function(t) {
                var a = x.domain(xd(t));
                x.domain(xd(t));
                var b = y.domain(yd(t)).range(yr(t));
                y.domain(yd(t)).range(yr(t));
                return arc(d);
            };
        };
    }
    function maxY(d) {
        //return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
        return d.children ? Math.max.apply(Math, d.children.map(maxY)) : (d.y + d.dy);
    }


    function brightness(rgb) {
        return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
    }


    function mouseover(d) {
        var title, candidate, jobid, html = '';
        if (d.name == "") {
            //console.log("d= " + d);
            document.body.style.cursor = 'default';
            document.getElementById('col2').style.display = 'none';

        } else {
            //var names = d.name.split(',');
            //console.log(names);
            document.body.style.cursor = 'pointer';
            document.getElementById('col2').style.display = 'inline';
            document.getElementById("col2").style.zIndex = "2000";
        }
        var popup = "";
        if (d.children != undefined) {
            var popup = d.children.length.toString();
            //console.log("pop= " + popup);
        }

        //tipLinks.show(d);
        var names = d.name.split(',');
        html = '';
        jobid = d.name;
        //console.log(jobid);
        if ((popup == null) || (popup == '')) {
            title = "JobIDs";
            html = '<div class="table-wrapper">' +
                '<center><h2 style="color:#337ab7;">' +
                title +
                '</h2></center><br>' +
                '<table class="sb_jobid" width="100%" }>';
            var count = 1, maxcount = 5;
            maxcount = parseInt(jobid.split(',').length / 10) > 5 ? parseInt(jobid.split(',').length / 10) : 5;
            var jobids = jobid.split("~");
            $.each(jobids[1].split(','),
                function (d, i) {

                    if (count == 1) {
                        html += "<tr><td style='width:20%;padding: 4px;'>" + i + '</td>';
                    } else {
                        html += "<td style='width:20%;padding: 4px;'>" + i + '</td>';

                        if (count == maxcount) {
                            html += "</tr>";
                            count = 0;
                        }
                    }
                    count = count + 1;
                });
            html += '</table>' +
                '</div>';
        } else {
            title = "JobIDs";
            html = '<div class="table-wrapper">';
            var count = 1, maxcount = 5;
            //jobid += ",123";
            count = parseInt(jobid.split(',').length);
            maxcount = parseInt(jobid.split(',').length / 10) > 5 ? parseInt(jobid.split(',').length / 10) : 5;
            var jobids = jobid.split("~");
            if (jobids[1] != undefined) {
                jobids[0] = jobids[1];
            } else {
                title = "";
            }
            html += '<center><h2 style="color:#337ab7;">' +
                title +
                '</h2></center><br><table class="sb_jobid" style="margin-bottom:5px;margin-right:5px;width:100%;padding: 4px;4px;4px;4px;" }>';
            $.each(jobids[0].split(','),
                function (d, i) {
                    if (count == 1) {
                        //html += "<tr><td style='width:20%;padding: 4px;'>" + i + '</td>';
                        //html += "<p style=' border-style: solid;border-color: #000000;border-width: 1px;margin-bottom:5px;margin-right:20px; width:100%;padding: 4px;4px;4px;4px;'>" + i + '</p>';
                        html += "<p style='margin-bottom:5px;margin-right:20px; width:100%;'>" + i + '</p>';
                    } else {

                        html += "<tr><td style='width:20%;padding: 4px;4px;'>" + i + '</td>';

                        if (count == maxcount) {
                            html += "</tr>";
                            count = 0;
                        }
                    }
                    count = count + 1;
                });
            html += '</table>' +
                '</div>';
        }
        content.html(html);

        //content.append("p")
        //    .attr("id", "current")
        //    .text(names + '-' + popup);

    }


    //mouseout function which removes the values and replaces them with a blank space
    function mouseout(d) {
        content.html(' ');
        document.getElementById('col2').style.display = 'none';
        document.body.style.cursor = 'default';
    }

    function mouseoverimg(d) {
        document.body.style.cursor = 'pointer';
        document.getElementById('col2').style.display = 'inline';;
    }
    function mouseoutimg(d) {
        document.getElementById('col2').style.display = 'none';
        document.body.style.cursor = 'default';

    }
}

//if (top != self) top.location.replace(location)

Here is my output image. in that you can see the larger nodes are overlapped by other nodes.