Учебники

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

Март 22, 2018

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

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

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

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

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

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

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

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

</svg>

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

Шаг 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 — к конечной точке. Атрибут style устанавливает цвет и толщину линии, используя стили обводки и ширины обводки .

  • x1 — это x-координата первой точки.

  • y1 — это y-координата первой точки.

  • x2 — это x-координата второй точки.

  • y2 — это y-координата второй точки.

  • штрих — цвет линии.

  • штрих-ширина — толщина линии.

x1 — это x-координата первой точки.

y1 — это y-координата первой точки.

x2 — это x-координата второй точки.

y2 — это y-координата второй точки.

штрих — цвет линии.

штрих-ширина — толщина линии.

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

Live Demo 

<!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, давайте следуем инструкциям ниже.

Шаг 1 — Создайте контейнер для хранения изображения SVG, как показано ниже. 

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

Шаг 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);

Шаг 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);

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

Live Demo 

<!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-координата левого верхнего угла прямоугольника.

  • ширина — это обозначает ширину прямоугольника.

  • высота — это обозначает высоту прямоугольника.

x — это x-координата левого верхнего угла прямоугольника.

y — это y-координата левого верхнего угла прямоугольника.

ширина — это обозначает ширину прямоугольника.

высота — это обозначает высоту прямоугольника.

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

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

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

Live Demo 

<!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 — это обозначает радиус круга.

cx — это x-координата центра круга.

cy — это y-координата центра круга.

r — это обозначает радиус круга.

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

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

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

Live Demo 

<!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 — это радиус х круга.

  • ry — это у-радиус круга.

cx — это x-координата центра эллипса.

cy — это y-координата центра эллипса.

rx — это радиус х круга.

ry — это у-радиус круга.

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

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

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

Live Demo 

<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>

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

54
Share: