Метка вне дуги (круговая диаграмма) d3.js

Я новичок в d3.js и пытаюсь сделать с ним круговую диаграмму. У меня есть только одна проблема: я не могу получить свои метки за пределами моих дуг... Эти метки расположены с помощью arc.centroid

arcs.append("svg:text")
    .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")

Кто может мне помочь с этим?

Источник

10 ответов

Решение

Я могу решить эту проблему - с помощью тригонометрии:).

Смотрите скрипку: http://jsfiddle.net/nrabinowitz/GQDUS/

В основном, звонит arc.centroid(d) возвращает [x,y] массив. Вы можете использовать теорему Пифагора для вычисления гипотенузы, которая является длиной линии от центра пирога до центроида дуги. Тогда вы можете использовать расчеты x/h * desiredLabelRadius а также y/h * desiredLabelRadius рассчитать желаемое x,y для вашего ярлыка якоря:

.attr("transform", function(d) {
    var c = arc.centroid(d),
        x = c[0],
        y = c[1],
        // pythagorean theorem for hypotenuse
        h = Math.sqrt(x*x + y*y);
    return "translate(" + (x/h * labelr) +  ',' +
       (y/h * labelr) +  ")"; 
})

Единственным недостатком здесь является то, что text-anchor: middle больше не лучший выбор - вам лучше настроить text-anchor в зависимости от того, на какой стороне пирога мы находимся:

.attr("text-anchor", function(d) {
    // are we past the center?
    return (d.endAngle + d.startAngle)/2 > Math.PI ?
        "end" : "start";
})
Источник

Спасибо!

Я нашел другой способ решить эту проблему, но ваш кажется лучше:-)

Я создал вторую дугу с большим радиусом и использовал ее для позиционирования моих меток.

///// Arc Labels ///// 
// Calculate position 
var pos = d3.svg.arc().innerRadius(r + 20).outerRadius(r + 20); 

// Place Labels 
arcs.append("svg:text") 
       .attr("transform", function(d) { return "translate(" + 
    pos.centroid(d) + ")"; }) 
       .attr("dy", 5) 
       .attr("text-anchor", "middle") 
       .attr("fill", function(d, i) { return colorL(i); }) //Colorarray Labels
       .attr("display", function(d) { return d.value >= 2 ? null : "none"; })  
       .text(function(d, i) { return d.value.toFixed(0) + "%"});
Источник

Специально для круговых диаграмм d3.layout.pie() Функция отформатирует данные с startAngle а также endAngle атрибутов. Радиус может быть любым, какой вы пожелаете (как далеко от центра вы хотите разместить метку).

Объединение этих фрагментов информации с парой тригонометрических функций позволяет вам определять координаты x и y для меток.

Рассмотрим эту суть/ блок.

Что касается позиционирования текста по x/y, магия заключается в этой строке (отформатированной для удобства чтения):

.attr("transform", function(d) {
  return "translate(" + 
    ( (radius - 12) * Math.sin( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) +
    ", " +
    ( -1 * (radius - 12) * Math.cos( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) +
  ")";
 })
  • ((d.endAngle - d.startAngle) / 2) + d.startAngle дает нам наш угол (тета) в радианах.
  • (radius - 12) произвольный радиус, который я выбрал для положения текста.
  • -1 * ось y инвертирована (см. ниже).

Используемые триггерные функции: cos = adjacent / hypotenuse а также sin = opposite / hypotenuse, Но есть пара вещей, которые мы должны рассмотреть, чтобы заставить их работать с нашими лейблами.

  1. 0 угол на 12 часов.
  2. Угол все еще увеличивается в направлении по часовой стрелке.
  3. Ось Y инвертирована из стандартной декартовой системы координат. Положительный у в направлении 6 часов - вниз.
  4. Положительный х по-прежнему в направлении 3 часа - вправо.

Это немного запутывает и в основном имеет эффект обмена sin а также cos, Наши тригональные функции становятся: sin = adjacent / hypotenuse а также cos = opposite / hypotenuse,

Подставляя имена переменных мы имеем sin(radians) = x / r а также cos(radians) = y / r, После некоторой алгебраической манипуляции мы можем получить обе функции в терминах x и y соответственно r * sin(radians) = x а также r * cos(radians) = y, Оттуда просто включите их в атрибут transform / translate.

Это позволит расположить метки в нужном месте, чтобы они выглядели причудливо, вам понадобится некоторая логика стиля, подобная этой:

.style("text-anchor", function(d) {
    var rads = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
    if ( (rads > 7 * Math.PI / 4 && rads < Math.PI / 4) || (rads > 3 * Math.PI / 4 && rads < 5 * Math.PI / 4) ) {
      return "middle";
    } else if (rads >= Math.PI / 4 && rads <= 3 * Math.PI / 4) {
      return "start";
    } else if (rads >= 5 * Math.PI / 4 && rads <= 7 * Math.PI / 4) {
      return "end";
    } else {
      return "middle";
    }
  })

Это сделает метки с 10:30 до 1:30 часов и с 4:30 до 7:30 часов якоря в середине (они выше и ниже), метки от 1: 30:00 до 4:30 часов якорь слева (они справа), а метки с 7:30 до 10:30 часов якорь справа (они находятся оставил).

Те же формулы можно использовать для любого радиального графика D3, единственное отличие состоит в том, как вы определяете угол.

Надеюсь, это поможет любому, кто столкнется с этим!

Источник

Я не знаю, помогает ли это, но я смог создать дуги, в которых я размещаю текст как на дуге, так и за ее пределами. В одном случае, когда я размещаю величины дуги внутри дуг, я поворачиваю текст на дуге в соответствии с углом дуги. В другом, где я размещаю текст вне дуги, он просто горизонтален. Код находится по адресу: http://bl.ocks.org/2295263

Мой лучший,

Фрэнк

Источник

Да, детка, это SOHCAHTOA

function coordinates_on_circle(hyp, angle){
  var radian= angle * Math.PI / 180 //trig uses radians
  return {
    x: Math.cos(radian) * hyp, //adj = cos(r) * hyp
    y: Math.sin(radian) * hyp //opp = sin(r) * hyp
  }
}
var radius=100
var angle=45
coordinates_on_circle(radius, angle)

Источник

Я добился того же, нарисовав процент в виде меток за пределами круговой диаграммы, вот код http://bl.ocks.org/farazshuja/e2cb52828c080ba85da5458e2304a61f

g.append("text")
        .attr("transform", function(d) {
        var _d = arc.centroid(d);
        _d[0] *= 2.2;   //multiply by a constant factor
        _d[1] *= 2.2;   //multiply by a constant factor
        return "translate(" + _d + ")";
      })
      .attr("dy", ".50em")
      .style("text-anchor", "middle")
      .text(function(d) {
        if(d.data.percentage < 8) {
          return '';
        }
        return d.data.percentage + '%';
      });
Источник

Эта функция рассчитывает центральную точку круговой секции для круговой диаграммы. Я добавляю функцию, чтобы получить центральную точку дуги. Ниже изображение, основанное на моей новой функции. обратитесь по ссылке: https://github.com/mbostock/d3/issues/1124

Источник

Это был недорогой ответ, которым я был доволен. Он выталкивает все метки по горизонтали (вот где у меня было дополнительное пространство):

g.append("text")
  .attr("transform", function(d) { 
      var pos = arc.centroid(d); 
      return "translate(" + (pos[0] + (.5 - (pos[0] < 0)) * radius) + "," + (pos[1]*2) + ")"; 
  })
  .attr("dy", ".35em")
  .style("text-anchor", function(d) { 
      return arc.centroid(d)[0] > 0 ? "start" : "end";
   })
  .text(function(d) { return d.label; });
Источник

Так что, если вы хотите использовать легенду с красивой внешностью, а не случайный текст. Я нашел довольно хорошее решение для этикеток. Как добавить легенду в круговую диаграмму с помощью D3js? А как централизовать круговую диаграмму?

Источник

Следующий CoffeeScript работал для меня, чтобы метки оставались внутри секторов, но по направлению к внешнему краю:

attr 'transform', (d) ->
  radius = width / 2 # radius of whole pie chart
  d.innerRadius = radius * 0.5
  d.outerRadius = radius * 1.5
  'translate(' + arc.centroid(d) + ')'
Источник
Другие вопросы по тегам