Задний план

Мне удалось получить графический пример работы динамической круговой диаграммы. Однако у меня проблема с пониманием синтаксиса...

Пример передает две HTML-ссылки и, кажется, связывает ссылки с двумя метками и двумя определенными кусочками круговой диаграммы, но не очевидно, как эти корреляции или ассоциации происходят в строке, которая передается в метод «круговой диаграммы». Я попытался передать еще несколько ссылок, но код, кажется, случайным образом связывает ссылки с метками. Кажется, не существует очевидного способа гарантировать, что Link1 всегда будет связан с Label1.

Вопрос

Кто-нибудь знает, как четко объяснить, что происходит в коде? Как две ссылки связаны только с двумя кусочками пирога? Как я могу последовательно связать ссылки с метками и определенными кусочками пирога?

Примечание

Лично мне не нравится, что функция круговой диаграммы принимает три «отдельные» строки значений, меток и ссылок, которые не совпадают друг с другом, поскольку это затрудняет чтение кода. Оригинал выглядит следующим образом...

Пример

pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]}); r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });)

Вместо этого было бы лучше иметь возможность передавать массив массивов... array = [[SliceValue1, label1, link1], [SliceValue2, label2, link2], и т. д. Если у кого-то есть идея, как это сделать, это был бы отличный способ очистить код и сделать его более читаемым.

Исходный код

<script>
  window.onload = function () {
    var r = Raphael("holder"),
    pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
    r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
    pie.hover(function () {
      this.sector.stop();
      this.sector.scale(1.1, 1.1, this.cx, this.cy);
      if (this.label) {
        this.label[0].stop();
        this.label[0].attr({ r: 7.5 });
        this.label[1].attr({ "font-weight": 800 });
      }
    }, function () {
    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
    if (this.label) {
    this.label[0].animate({ r: 5 }, 500, "bounce");
    this.label[1].attr({ "font-weight": 400 });
    }
    });
  };
</script>