Docuburst-подобная диаграмма солнечных лучей с D3?

Docuburst можно использовать для создания такая схема:

введите здесь описание изображения

Похоже, Docuburst написан на Prefuse, а не на D3.

Эта диаграмма похожа на хорошо известные диаграммы D3, в которых используется структура разделов: (самое большое отличие заключается в способе отображения меток).

введите здесь описание изображения

Есть ли пример макета раздела D3 (солнечные лучи), который поддерживает такие круглые метки, как показано на первом рисунке?

Если вам нужен пример без обработки меток, вот jsfiddle, взятый из другие вопросы и ответы; а также еще один jsfiddle, уже с метками.

Это небольшой тестовый пример в D3, над которым я работаю:

jsfiddle

введите здесь описание изображения

Мне удалось центрировать текст в круглых областях, но теперь мне нужно найти правильный размер текста.


javascript svg d3.js sunburst-diagram
person VividD    schedule 03.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете запустить текст по дуговому пути. без труда.

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;
    });

Где xlink:href — это id пути. *Примечание** Я обманываю здесь и просто использую имя, поэтому будьте осторожны, оно может быть не уникальным:

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

Вот обновленная скрипка.

В этом примере вдоль этой дуги помещаются только 3 текста, и это сходит с ума, когда они не помещаются. Таким образом, следующим шагом будет сравнение размер пути с textpath.getComputedTextLength и напишите текст, повернутый, если он не помещается.

person Mark    schedule 03.01.2015