Масштабируемая диаграмма солнечных лучей в процентах

Я новичок в D3 и надеюсь, что вы можете мне помочь. Я работаю над диаграммой солнечных лучей, разделенной на внутренний и внешний слои, где внутренний слой представляет группу, а внешние слои представляют подгруппы. Вот рабочий пример для справки: jsfiddle.net/9gpL308y/1/ (и вот исходная скрипка, которую я использовал в качестве отправной точки: jsfiddle.net/j9WnB/64/)

В настоящее время каждый внутренний уровень складывается в число на основе значений его категорий во внешнем слое, и категории ведут себя так же, как и их подкатегории. Мне нужно, чтобы каждый слой отображался в процентах (из 100, которые должны складываться для всех групп на одном слое) и масштабироваться до подходящего размера. Возьмем, к примеру, это изображение:

изображение карты розыска

Рабочий пример был бы чрезвычайно полезен. Я нашел несколько тем по этой проблеме, но не смог заставить ее работать с предоставленными советами. Честно говоря, я до сих пор не совсем понимаю, что здесь происходит (я никогда не был хорош в геометрии).

tl; dr: Как сделать так, чтобы диаграмма солнечных лучей из скрипта выше отображала данные в процентах и ​​правильно масштабировала дуги?

Спасибо.


javascript d3.js sunburst-diagram
person skrunic    schedule 07.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В этом случае есть кое-что, что связано с геометрией (кроме позиционирования метки, но это то, что предоставляет arc.centroid). Чтобы получить проценты, вам просто нужно разделить экстент дочернего узла на экстент его родительского.

                var center = arc.centroid(d);
                g.append("text")
                 .attr("text-anchor", "middle")
                 .attr("transform", "translate(" + center + ")")
                 .text(function(_) {
                    if (d.parent == null)
                    {
                        return;
                    }
                    var percentage = 100 * d.dx / d.parent.dx; // that's it!
                    return d3.format(",.2f")(percentage) + "%";
                 })

Рабочий пример здесь: http://jsfiddle.net/9gpL308y/2/

В образовательных целях вы можете выгрузить все узлы схемы разделов, а затем выяснить, насколько они соответствуют визуальной картине. Вы также можете прочитать об этих parent, dx и т. Д. В документации по структуре разделов: https://github.com/d3/d3-3.x-api-reference/blob/master/Partition-Layout.md

person Nixie    schedule 08.10.2016
comment
Спасибо за ответ. Ваш пример дает каждой группе внутреннего круга процент, который вместе составляет 100, но распределение неправильное или, по крайней мере, не то, к чему я стремлюсь. Они расположены равномерно, но быть не должно. Я добавил больше данных в ваш пример: jsfiddle.net/zyrypoL7 Из данных, с которыми я работаю, Группа 8 (например) должно составлять 20,92%, но здесь это 7,54%, как и в большинстве других групп. Группа 24 должна добавить 5,31% вместо 8%. Пожалуйста, проверьте изображение выше для справки или предупредите меня, если я что-то упускаю или прошу что-то странное. :) - person skrunic; 10.10.2016
comment
Недавно я вернулся к этому и понял, что ваш пример был правильным с самого начала. Я просто работал с тем, что считал правильными данными, поэтому результаты складывались не так, как предполагалось в исходных расчетах. Теперь, когда данные исправлены, все работает. Спасибо еще раз. :) - person skrunic; 21.11.2016