Реализация меток круговой диаграммы, используемых Дэвидом Буэзой

Я пытаюсь внедрить метки круговой диаграммы Дэвида Буэзы в собственную круговую диаграмму. Я пытался адаптировать используемый код к своим потребностям и до сих пор преуспел. И все же происходит кое-что интересное. Во-первых, мои линии начинаются снаружи круговой диаграммы, а во-вторых, две метки имеют странные дуги в линиях, идущих к ним.

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

return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                return [arc.centroid(d2), outerArc.centroid(d2), pos];
            };

но я не могу найти, как это исправить.

EDIT1: благодаря этот вопрос Мне удалось исправить линии, доходящие только до края круга. Это было связано с порядком рисования SVG. Обновлен Plunkr: ссылка. Проблема с дугой осталась.


javascript d3.js labels
person Yoeri    schedule 25.05.2016    source источник
comment
Вы этого хотели?   -  person thatOneGuy    schedule 25.05.2016
comment
Это! Спасибо, что посмотрели, я соответствующим образом скорректировал свой код.   -  person Yoeri    schedule 25.05.2016
comment
@thatOneGuy: я решил, что на самом деле хочу вырезать пути в точке, в которой они пересекаются с кусочками. Я пробовал это с помощью .attr("clip-path", ".slices"), но это не сработало. Любые идеи?   -  person Yoeri    schedule 25.05.2016
comment
Вы уже сделали это здесь? stackoverflow.com/questions/37433298/   -  person thatOneGuy    schedule 25.05.2016
comment
Не совсем то, что все еще рисует линии, просто не отображает их, потому что срезы находятся поверх них. Я не хочу рисовать линии, если они выходят за внешний радиус круговой диаграммы, потому что я хотел бы сделать анимацию с непрозрачностью при наведении курсора мыши.   -  person Yoeri    schedule 25.05.2016
comment
Я добавил ответ, чтобы правильно объяснить @yoeri   -  person thatOneGuy    schedule 25.05.2016

Ответы (1)


arrow_upward
1
arrow_downward

«Дуги», которые вы видели, были просто путями от меток к дугам. Чтобы исправить это, просто отредактируйте место, где заканчивается путь:

pos[0] = radius *1.2* (midAngle(d2) < Math.PI ? 1 : -1);

Раньше 1,2 было 0,95. Это решает эту проблему.

Другая проблема, с которой вы столкнулись, заключалась в том, что вы хотели, чтобы пути заканчивались, когда они попадали за пределы срезов. Вы решили эту проблему, изменив порядок рисования путей и фрагментов, отлично. Но теперь вы хотите, чтобы mouseover изменило непрозрачность срезов. Теперь очевидно, что когда вы это сделаете, вы сможете увидеть пути позади.

Чтобы решить эту проблему, я бы поместил белый круг между дорожками и фрагментами, чтобы вы не видели дорожки. Итак, теперь порядок будет таким:

пути > белый круг > фрагменты

Код для добавления круга:

Переупорядочить g элементов:

svg.append("g")
        .attr("class", "lines");

    svg.append("g")
    .attr('class', 'circleBehind')

  svg.append("g")
      .attr("class", "slices");
  svg.append("g")
    .attr("class", "labels");

Добавить круг:

var circleBehind = svg.select('.circleBehind').append('circle')
    .attr('r',radius * 0.95)
    .attr('cx',0)
    .attr('cy',0)
    .style('fill','white')

Это, вероятно, самый простой способ, иначе вам придется работать с конечными точками путей и т. д.

Обновленный plnkr: http://plnkr.co/edit/53SvO9ym6euMAwGfIpcU?p=preview

person thatOneGuy    schedule 25.05.2016
comment
Спасибо за рецензию, у моего коллеги была такая же идея, ха-ха. Единственное, что мне пришлось изменить в вашем коде, это radius * 0.95, поскольку это позволяло линиям по-прежнему «пересекать» 5% внешнего радиуса. Ответ принят! :) - person Yoeri; 25.05.2016