CODEWITHSUNDEEP
javascriptsvgd3.jssunburst-diagram
VividD
VividD

Reputation: 10536

Docuburst-like sunburst diagram with D3?

Docuburst can be used for generating such diagram:

enter image description here

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)

enter image description here

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

enter image description here

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

Upvotes: 1

Views: 3416

Answers (1)

Mark
Mark

Reputation: 108522

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.

Upvotes: 2

Related Questions