D3.js - transformacja SVG

SVG udostępnia opcje przekształcania pojedynczego elementu kształtu SVG lub grupy elementów SVG. Obsługuje transformację SVGTranslate, Scale, Rotate i Skew. Nauczmy się transformacji w tym rozdziale.

Wprowadzenie do transformacji SVG

SVG wprowadza nowy atrybut, transformwspierać transformację. Możliwe wartości to co najmniej jedna z następujących wartości:

Translate - To ma dwie opcje, tx odnosi się do tłumaczenia wzdłuż osi X i tyodnosi się do tłumaczenia wzdłuż osi y. DlaExample- przetłumacz (30 30).
Rotate - Potrzeba trzech opcji, angle dotyczy kąta obrotu, cx i cyodnosi się do środka obrotu w osi x i y. Jeślicx i cynie są określone, wówczas domyślnie używany jest bieżący początek układu współrzędnych. DlaExample - obróć (60).
Scale - To ma dwie opcje, sx odnosi się do współczynnika skalowania wzdłuż osi x i syodnosi się do współczynnika skalowania wzdłuż osi y. Tutaj,sy jest opcjonalny i przyjmuje wartość sx, jeśli nie jest określony. DlaExample - skala (10).
Skew (SkewX and SkewY)- To wymaga jednej opcji; theskew-angleodnosi się do kąta wzdłuż osi X w przypadku SkewX i kąta wzdłuż osi Y w przypadku SkewY. DlaExample - skos (20).

Przykład prostokąta SVG z translacją, który jest opisany poniżej -

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

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
            transform = "translate(30 30)">
         </rect>
      </svg>
   </body>
</html>

Powyższy kod da następujący wynik.

Dla pojedynczego elementu SVG można określić więcej niż jedną transformację, używając spacji jako separacji. Jeśli określono więcej niż jedną wartość, transformacja zostanie zastosowana po kolei w podanej kolejności.

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

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20" 
            width = "60" 
            height = "60" 
            fill = "green" 
            transform = "translate(60 60) rotate(45)">
         </rect>
      </svg>
   </body>
</html>

Powyższy kod da następujący wynik.

Transformację można również zastosować do elementu grupy SVG. Umożliwia to przekształcanie złożonej grafiki zdefiniowanej w SVG, jak opisano poniżej.

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

   <body>
      <svg width = "300" height = "300">
         <g transform = "translate(60,60) rotate(30)">
            <rect x = "20" 
               y = "20" 
               width = "60" 
               height = "30" 
               fill = "green">
            </rect>
            <circle cx = "0" 
               cy = "0" 
               r = "30" 
               fill = "red"/>
         </g>
      </svg>
   </body>
</html>

Powyższy kod da następujący wynik.

Minimalny przykład

Aby utworzyć obraz SVG, spróbuj go przeskalować i obrócić za pomocą transformacji, wykonajmy kroki podane poniżej.

Step 1 - Utwórz obraz SVG i ustaw szerokość na 300 pikseli i wysokość na 300 pikseli.

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

</svg>

Step 2 - Utwórz grupę SVG.

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

Step 3 - Utwórz prostokąt o długości 60 i wysokości 30 i wypełnij go kolorem zielonym.

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

Step 4 - Utwórz okrąg o promieniu 30 i wypełnij go kolorem czerwonym.

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

Step 5 - Dodaj atrybut transformacji oraz dodaj translate i rotate, jak pokazano poniżej.

<svg width = "300" height = "300">
   <g transform = "translate(60,60) rotate(30)">
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "60" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

Step 6 - Utwórz dokument HTML „svg_transform_rotate_group.html” i zintegruj powyższe SVG, jak wyjaśniono poniżej.

<!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">
            <g transform = "translate(60,60) rotate(30)">
               <rect x = "20" 
                  y = "20" 
                  width = "60" 
                  height = "60" 
                  fill = "green">
               </rect>
               <circle cx = "0" 
                  cy = "0" 
                  r = "30" 
                  fill = "red"/>
            </g>
         </svg>
      </div>
   </body>
</html>

Powyższy kod da następujący wynik.

Transformacja przy użyciu D3.js

Aby utworzyć SVG przy użyciu D3.js, wykonajmy kroki podane poniżej.

Step 1 - Utwórz kontener do przechowywania obrazu SVG, jak wyjaśniono poniżej.

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

Step 2 - Utwórz obraz SVG, jak wyjaśniono poniżej.

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

Step 3 - Utwórz element grupy SVG i ustaw atrybuty przesuwania i obracania.

var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");

Step 4 - Utwórz prostokąt SVG i dołącz go do grupy.

var rect = group
   .append("rect")
   .attr("x", 20)
   .attr("y", 20)
   .attr("width", 60)
   .attr("height", 30)
   .attr("fill", "green")

Step 5 - Utwórz okrąg SVG i dołącz go do grupy.

var circle = group
   .append("circle")
   .attr("cx", 0)
   .attr("cy", 0)
   .attr("r", 30)
   .attr("fill", "red")

Kompletny kod wygląda następująco -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>SVG rectangle</title>
      <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);

            var group = svg.append("g")
               .attr("transform", "translate(60, 60) rotate(30)");
            
            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")
            
            var circle = group
               .append("circle")
               .attr("cx", 0)
               .attr("cy", 0)
               .attr("r", 30)
               .attr("fill", "red")
         </script>
      </div>
   </body>
</html>

Powyższy kod da następujący wynik.

Przekształć bibliotekę

D3.js udostępnia oddzielną bibliotekę do zarządzania transformacją bez ręcznego tworzenia atrybutów transformacji. Zapewnia metody obsługi wszystkich typów transformacji. Niektóre metody sątransform(), translate(), scale(), rotate()itp. Możesz dołączyć d3-transform na swojej stronie internetowej za pomocą następującego skryptu.

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>

W powyższym przykładzie kod transformacji można zapisać, jak pokazano poniżej -

var my_transform = d3Transform()
   .translate([60, 60])
   .rotate(30);

var group = svg
   .append("g")
   .attr("transform", my_transform);