Docuburst-like sunburst diagram with D3?

Question

Docuburst can be used for generating such diagram:

It looks Docuburst is written in Prefuse, not in D3.

This diagram is similar to well known D3 diagrams that use partition layout: (the biggest difference is method for displaying labels)

Is there any D3 partition layout (sunburst) example that supports such circular labels as displayed in the first picture?

If you want some example without label handling to start with, here is jsfiddle, taken from another Q&A; and also one more jsfiddle, this one already with labels.

---

This is a small test example in D3 I am working on:

jsfiddle

I managed to center the text in circular regions, but now I need to find the right text size.

Answer 1

You can run the text along the arc path pretty easily.

group.append("svg:text")    
    .attr("dx", function (d) {
        var c = arc.centroid(d);
        return c[0];
    })
    .attr("dy", "30")
    .append("textPath")
    .attr("xlink:href", function(d){
        return "#" + d.name;
    })
    .text(function (d) {
        return d.name;
    });

Where xlink:href is the id of the path. *Note** I'm cheating here and just using the name so be careful it might not be unique:

.attr("id", function(d){
    return d.name;
})

Here's an updated fiddle.

In that example only 3 text fit along there arc and it gets crazy when it won't fit. So, the next step would be to compare the size of the path with the textpath.getComputedTextLength and write the text rotated if it won't fit.