score:0

Accepted answer

i just found this Donut Chart example and changed some parts in my code. Though it looks cluttered it does the job. Maybe with some polishing I could get decent looks:

Zoomable sunburst with text

Here is my code:

var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")"),
g = null;

d3.json(dataFile, function(error, data) {
    if (error) {
        throw error;
    }

    g = svg.selectAll(".arc")
        .data(partition.nodes(data))
        .enter()
        .append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { 
            return color((d.children ? d : d.parent).name); 
        })
        .on("click", self.click);

    g.append("text")
        .attr("transform", function (d) { 
            return "translate(" + arc.centroid(d) + ")"; 
        })
        .attr("dy", ".35em")
        .text(function (d) { 
            return d.name + "\n" + formatNumber(d.value);
        });
});

Related Query

More Query from same tag