🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

svg.connectable.js

A JavaScript library for connecting SVG things.

svg.connectable.js

CDN

The library is available on CDNJS as well. To use it, just do:

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/2.0.1/svg.connectable.min.js"></script>

Usage

This library depends on:

<script src="path/to/svg.js"></script> <script src="path/to/svg.draggy.js"></script> <script src="path/to/svg.connectable.js"></script> <!-- Or from CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/2.0.1/svg.connectable.min.js"></script> --> <div class="graph"></div> <script>     var svg = new SVG(document.querySelector(".graph")).size("100%", 500);     var links = svg.group();     var markers = svg.group();     var nodes = svg.group();      var g1 = nodes.group().translate(300, 200).draggy();     g1.circle(80).fill("#C2185B");      var g2 = nodes.group().translate(100, 200).draggy();     g2.circle(50).fill("#E91E63");      var g3 = nodes.group().translate(200, 400).draggy();     g3.circle(100).fill("#FF5252");      g1.connectable({         container: links,         markers: markers     }, g2).setLineColor("#5D4037");      g2.connectable({         padEllipse: true     }, g3).setLineColor("#5D4037") </script>

This Demo in jsfiddle: https://jsfiddle.net/u8qck0h3/

Documentation

connectable(options, elmTarget)

Connects two elements. If called multiple times, the lines will be curved.

Params

  • Object options: An object containing the following fields:
  • container (SVGElement): The line elements container.
  • markers (SVGElement): The marker elements container.
  • padEllipse (Boolean): If true, the line coordinates will be placed with a padding.
  • SVGElement elmTarget: The target SVG element.

Return

computeLineCoordinates(con)

The function that computes the new coordinates. It can be overriden with a custom function.

Params

  • Connectable con: The connectable instance.

Return

  • Object An object containing the x1, x2, y1 and y2 coordinates.

update()

Updates the line coordinates.

setLineColor(color, c)

Sets the line color.

Params

  • String color: The new color.
  • Connectable c: The connectable instance.

How to contribute

Have an idea? Found a bug? See how to contribute.

License

See the LICENSE file.


You May Also Like