D3.js - Введение в SVG

SVG означает Scalable Vector Graphics. SVG - это формат векторной графики на основе XML. Он предоставляет возможности для рисования различных форм, таких как линии, прямоугольники, круги, эллипсы и т. Д. Следовательно, проектирование визуализаций с помощью SVG дает вам больше возможностей и гибкости.

Особенности SVG

Некоторые из характерных особенностей SVG следующие:

SVG - это векторный формат изображения, основанный на тексте.
SVG по структуре похож на HTML.
SVG можно представить как Document object model.
Свойства SVG можно указать как атрибуты.
SVG должен иметь абсолютные позиции относительно начала координат (0, 0).
SVG может быть включен в HTML-документ как есть.

Минимальный пример

Давайте создадим минимальное изображение SVG и включим его в документ HTML.

Step 1 - Создайте изображение SVG и установите ширину 300 пикселей и высоту 300 пикселей.

<svg width = "300" height = "300">

</svg>

Здесь svgзапускает изображение SVG, и у него есть ширина и высота в качестве атрибутов. Единицей измерения формата SVG по умолчанию являетсяpixel.

Step 2 - Создайте линию, начинающуюся в (100, 100) и заканчивающуюся в (200, 100), и установите красный цвет для линии.

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

Здесь line тег рисует линию и ее атрибуты x1, y1 относится к отправной точке и x2, y2относится к конечной точке. Атрибут стиля устанавливает цвет и толщину линии с помощьюstroke и stroke-width стили.

x1 - Это координата x первой точки.
y1 - Это координата Y первой точки.
x2 - Это координата x второй точки.
y2 - Это координата Y второй точки.
stroke - Цвет линии.
stroke-width - Толщина лески.

Step 3 - Создайте HTML-документ svg_line.html и интегрируйте указанный выше SVG, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

Приведенная выше программа даст следующий результат.

SVG с использованием D3.js

Чтобы создать SVG с использованием D3.js, давайте сделаем шаги, указанные ниже.

Step 1 - Создайте контейнер для изображения SVG, как показано ниже.

<div id = "svgcontainer"></div>

Step 2- Выберите контейнер SVG с помощью метода select () и вставьте элемент SVG с помощью метода append (). Добавьте атрибуты и стили, используя методы attr () и style ().

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg").attr("width", width).attr("height", height);

Step 3 - Аналогичным образом добавьте line элемент внутри svg элемент, как показано ниже.

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

Полный код выглядит следующим образом -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

Приведенный выше код дает следующий результат.

Прямоугольник

Прямоугольник представлен <rect> тег, как показано ниже.

<rect x = "20" y = "20" width = "300" height = "300"></rect>

Атрибуты прямоугольника следующие:

x - Это координата x левого верхнего угла прямоугольника.
y - Это координата Y верхнего левого угла прямоугольника.
width - Обозначает ширину прямоугольника.
height - Обозначает высоту прямоугольника.

Простой прямоугольник в SVG определяется, как описано ниже.

<svg width = "300" height = "300">
   <rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
</svg>

Такой же прямоугольник можно создать динамически, как описано ниже.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

Приведенный выше код даст следующий результат.

Элемент круга

Круг представлен <circle> тег, как описано ниже.

<circle cx = "200" cy = "50" r = "20"/>

Атрибуты круга следующие -

cx - Это координата x центра круга.
cy - Это координата Y центра круга.
r - Это обозначает радиус круга.

Ниже описан простой круг в SVG.

<svg width = "300" height = "300">
   <circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

Такой же круг можно создать динамически, как описано ниже.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

Приведенный выше код даст следующий результат.

Элемент эллипса

Элемент SVG Ellipse представлен <ellipse> тег, как описано ниже.

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

Атрибуты эллипса следующие:

cx - Это координата x центра эллипса.
cy - Это координата Y центра эллипса.
rx - Это радиус x круга.
ry - Это радиус y круга.

Ниже описан простой эллипс в SVG.

<svg width = "300" height = "300">
   <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>

Такой же эллипс можно создать динамически, как показано ниже,

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

Приведенный выше код даст следующий результат.