D3.js - API путей

Пути используются для рисования прямоугольников, кругов, эллипсов, полилиний, многоугольников, прямых линий и кривых. Контуры SVG представляют собой контур фигуры, который можно обводить, заливать, использовать как обтравочный контур или любую комбинацию всех трех. В этой главе подробно описывается API путей.

Настройка путей

Вы можете настроить Paths API, используя приведенный ниже скрипт.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

Методы API путей

Некоторые из наиболее часто используемых методов API путей кратко описаны ниже.

d3.path() - Этот метод используется для создания нового пути.
path.moveTo(x, y) - Этот метод используется для перемещения указанных значений x и y.
path.closePath() - Этот метод используется для закрытия текущего пути.
path.lineTo(x, y) - Этот метод используется для создания линии от текущей точки до определенных значений x, y.
path.quadraticCurveTo(cpx, cpy, x, y) - Этот метод используется для построения квадратичной кривой от текущей точки до указанной.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Этот метод используется для построения кривой Безье от текущей точки до указанной.
path.arcTo(x1, y1, x2, y2, radius) - Этот метод используется для рисования дуги окружности от текущей точки до указанной точки (x1, y1) и завершения линии между указанными точками (x1, y1) и (x2, y2).
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Этот метод используется для рисования дуги окружности с указанным центром (x, y), радиусом, startAngle и endAngle. Если значение «против часовой стрелки» истинно, то дуга рисуется против часовой стрелки, в противном случае - по часовой стрелке.
path.rect(x, y, w, h)- Этот метод используется для создания нового подпути, содержащего только четыре точки (x, y), (x + w, y), (x + w, y + h), (x, y + h). Эти четыре точки, соединенные прямыми линиями, обозначают подпуть как закрытую. Эквивалентен context.rect и использует команды «lineto» SVG.
path.toString() - Возвращает строковое представление этого пути в соответствии со спецификацией данных пути SVG.

пример

Нарисуем простую линию в D3, используя API пути. Создать веб-страницуlinepath.html и добавьте в него следующие изменения.

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path line Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)" />
      </svg>
      
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
         var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

Теперь запросите браузер, и мы увидим следующий результат.