JavaScript. Подробное руководство, 6-е издание, стр. 353

<b>      х2 + &quot;,&quot; + у2 +          // Дуга заканчивается в точке (х2,у2)</b>

<b>      Z&quot;;                      // Закончить рисование в точке (сх,су)</b>

 // Теперь установить атрибуты элемента <svg:path>

<b>    path.setAttribute(&quot;d&quot;, d);               // Установить описание контура</b>

 path.setAttribute("fill", colors[i]); // Установить цвет сектора

<b>    path.setAttribute(&quot;stroke&quot;, &quot;black&quot;);    // Рамка сектора - черная</b>

 path.setAttribute("stroke-width”, "2"); // 2 единицы толщиной

<b>    chart.appendChild(path);                 // Вставить сектор в диаграмму</b>

<b>    // Следующий сектор начинается в точке, где закончился предыдущий</b>

 startangle = endangle;

<b>    // Нарисовать маленький квадрат для идентификации сектора в легенде</b>

 var icon = document.createElementNS(svgns, "rect");

 icon.setAttribute("x”, lx); // Координаты квадрата

 icon.setAttribute("y", ly + ЗО*і);

 icon.setAttribute("width", 20); // Размер квадрата

 icon.setAttribute("height", 20);

 icon.setAttribute("fill", colors[i]); // Тем же цветом, что и сектор

 icon.setAttribute("stroke", "black"); // Такая же рамка,

 icon.setAttribute("stroke-width", "2");

 chart.appendChild(icon); // Добавить в диаграмму

 // Добавить метку правее квадрата

 var label = document.createElementNS(svgns, "text");

 label.setAttribute("x", lx + 30); // Координаты текста

 label.setAttribute("y", ly + ЗО*і + 18);

<b>    // Стиль текста можно также определить посредством таблицы CSS-стилей</b>

 label.setAttribute("font-family", "sans-serif");

 label.setAttribute("font-size", "16");

 // Добавить текстовый DOM-узел в элемент <svg:text>

 label.appendChild(document.createTextNode(labels[і]));

 chart.appendChild(label); // Добавить текст в диаграмму

 }

 return chart;

}

Программный код в примере 21.2 относительно прост. Здесь выполняются некоторые математические расчеты для преобразования исходных данных в углы секторов круговой диаграммы. Однако основную часть примера составляет программный код, создающий SVG-элементы и выполняющий настройку их атрибутов. Чтобы этот пример мог работать в броузерах, не полностью поддерживающих стандарт HTML5, здесь формат SVG интерпретируется как грамматика XML и вместо метода

createElement()

используются пространство имен SVG и метод

createElementNS()

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

<svg:path>

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

d

элемента

<svg:path>.

Основу описания составляет компактная грамматика символьных кодов и чисел, определяющих координаты, углы и прочие значения. Например, символ

М

означает «move to» (переместиться в точку), и вслед за ним должны следовать координаты X и У точки. Символ

L

означает «line to» (рисовать линию до точки); он рисует линию от текущей точки до точки с координатами, которые следуют далее. Кроме того, в этом примере используется символьный код

А

, который рисует дугу (arc). Вслед за этим символом следуют семь чисел, описывающих дугу. Точное описание нас здесь не интересует, но вы можете найти его в спецификации по адресу http://www.w3.org/TR/SVG/.

Обратите внимание, что функция

pieChart()

возвращает элемент

<svg>,

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

<html>

<head>

 <script src="PieChart.js"x/scr.ipt>

</head>

<body onload="document.body.appendChild(

 pieChart([12, 23, 34, 45], 640, 400, 200, 200, 150,

 ['красный','синий’,'желтый','зеленый'],

 ['Север','Юг', 'Восток', 'Запад'], 400, 100));