Как я могу получить startAngle и endAngle каждой дуги в примере с солнечными лучами, используя d3.js?

Я хочу получить начальный и конечный углы для каждой дуги в примере с солнечными лучами, как в http://bl.ocks.org/4063423:

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


d3.js hierarchy sunburst-diagram
person Sreedivya    schedule 17.01.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы можете увидеть их в коде:

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

Таким образом, ваш начальный угол находится в атрибуте x, а x + dx дает конечный угол.

Хитрость в том, что x, dx, y и dy устанавливаются функцией компоновки:

var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return 1; });

sort(null) говорит ему не изменять порядок ваших данных. size(...) сообщает ему выходной диапазон для координат x и y (радиус возводится в квадрат, потому что мы сопоставляем с областью). value(...) — это метод доступа к значению для взвешивания каждого элемента.

person Superboggly    schedule 17.01.2013
comment
Я попытался использовать круг ароматов Cofee ссылка, добавить ярлыки и увеличить изображение Sun-burst. Однако я хочу показать вес каждого элемента в значении, а также скрыть метки, когда дуга меньше 0,01 (d.dx ‹ 0,01). Сначала это работает, но не по щелчку. Метки появляются, даже если размер дуги меньше 0,01. Как я могу получить соответствующий размер пути для меток при нажатии? Js Fiddle с кодом: ссылкаJS Fiddle для полного результата: ссылка - person Sreedivya; 18.01.2013
comment
В вашей функции завершения перехода текста я не уверен, почему вы когда-либо устанавливали st = d, кажется, это работает, если вы всегда используете e. Но вам может понадобиться вычислить лучшую dx после клика, иначе у вас могут быть большие клинья, которые по-прежнему будут ‹ 0,01. Вам нужна пропорция нового размера клина, поэтому попробуйте e.dx / d.dx (d — родитель). См. здесь - person Superboggly; 21.01.2013

arrow_upward
3
arrow_downward

Вы можете использовать этот простой код:

...
.data(partition.nodes)
.filter(function(d) { // You're not restricted to use the "filter" function
   var startAngle = arc.startAngle()(d);
   var endAngle = arc.endAngle()(d);
});
...
person Max Dy    schedule 29.04.2015
comment
Интересная альтернатива — возвращает угол в радианах, а не в градусах/360. - person interpolack; 12.06.2015