domarrow.js | Creating an Relation Arrow Between HTML DOM Elements with JavaScript

domarrow.js is a JavaScript graphics component, it allows us can create an arrow between different html dom elements and connect them. It is often used to create a relation graph in javascript.

domarrow.js | Creating an Relation Arrow Between HTML DOM Elements with JavaScript

AuthorLinksMade withLast update
schaumbOffice HomeJavaScriptSep 17, 2020

How to create a relation array between html dom elements using domarrow.js?

1.Load the domarrow.js and domarrow.css files in html page

<link rel="stylesheet" href="domarrow.css">
<script src="domarrow.js"></script>

2.Create two dom elements

<div id="d1"></div>
<div id="d2"></div>

3.Use connection tag to connect these two elements

<connection from="#d1" to="#d2" tail></connection>

4.You can use color attribution to set the color of arrow

<connection from="#d1" to="#d2" color="red" tail></connection>

4. If you plan to hide the arrow, you can remove tail attribution

<connection from="#d1" to="#d2" color="red"></connection>

Leave a Reply

Your email address will not be published. Required fields are marked *