Как получить координаты срезов вдоль края круговой диаграммы?

Я создаю piechart с D3, используя d3.layout.pie() . Он выглядит как этот, без черных точек (я поместил их вручную в Photoshop, чтобы проиллюстрировать мою проблему). Интересно, как я могу вычислить координаты этих точек, которые находятся посередине поверхности, чтобы разместить там какие-то подсказки. Я не прошу окончательного решения, но больше о принципе, как это сделать. Благодарю.

Круговой график

Вы можете использовать следующие уравнения для вычисления точки по окружности круга:

 x = cx + r * cos(a) y = cy + r * sin(a) 

Где (cx, cy) – центр круга, r – радиус, a – угол.

Для того, чтобы это сработало для вас, вам понадобится способ вычисления угла, основанного на кусочках пирога на вашем графике – см. Ниже.


Согласно документации d3 для макетов pie функция pie возвращает список дуг, поэтому вы можете обрабатывать эти данные для вычисления каждой из ваших точек:

pie (значения [, index])

Вычисляет функцию pie для указанного массива значений. Может быть указан необязательный индекс, который передается в функции начала и конца угла. Возвращаемое значение представляет собой массив дескрипторов дуги

  • value – значение данных, возвращаемое атрибутом value.
  • startAngle – начальный угол дуги в радианах.
  • endAngle – конечный угол дуги в радианах.
  • data – исходная дата для этой дуги.

Предположительно, вы могли бы просто взять половину расстояния между endAngle и startAngle для каждой дуги и разместить там свою точку.


Для чего это стоит, вот код из pie.js который используется для вычисления каждой дуги:

 // Compute the arcs! // They are stored in the original data's order. var arcs = []; index.forEach(function(i) { var d; arcs[i] = { data: data[i], value: d = values[i], startAngle: a, endAngle: a += d * k }; }); return arcs; 

Это помогает?

Я знаю, что это был год, когда вы задавали эти вопросы, но просто отбрасывали ответ, который мог бы помочь другим. Попробуйте использовать arc.centriod () в преобразовании кругов, которые вы хотите отобразить.

Что-то вроде этого

 enterMenu.append("circle") .attr("r", 5) .attr('transform',function(d){ return "translate(" + arc.centriod(d) + ")"; }); 

Это должно помещать круг точно между срезом. В приведенной выше функции d является конечным элементом дуги.

Для вас обратитесь к этой ссылке http://bl.ocks.org/Guerino1/2295263

Это может показаться тривиальным, но я пытался найти координаты x и y внутри каждого fragmentа, и когда я увидел вышеприведенную формулу,

x = cx + r * cos (a)

y = cy + r * sin (a)

, это можно сделать, увеличивая r от (cx + 1 или cy + 1) до длины радиуса и повторяя, увеличивая (a) от угла начала до угла назначения, затем добавляя (cx, cy). Надеюсь, это поможет кому-то.