-
-
Notifications
You must be signed in to change notification settings - Fork 372
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(arrow-heads): implement image arrow heads (#157)
* feat(arrow-heads): implement image arrow heads * chore(examples): add image arrow heads example * style(arrow-heads): reformat * docs(arrow-heads): add docs * style(arrow-heads): reformat and reorganize new code * docs(arrow-heads): replace external image
- Loading branch information
Showing
8 changed files
with
435 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Vis Network | Edge Styles | Image Arrow Heads</title> | ||
|
|
||
| <style type="text/css"> | ||
| html, | ||
| body, | ||
| #mynetwork { | ||
| margin: 0px; | ||
| padding: 0px; | ||
| } | ||
|
|
||
| #mynetwork { | ||
| position: fixed; | ||
| left: 0px; | ||
| top: 0px; | ||
| bottom: 0px; | ||
| right: 50%; | ||
| min-height: 100vh; | ||
| border-right: 1px solid lightgray; | ||
| background: white; | ||
| } | ||
|
|
||
| #text { | ||
| position: absolute; | ||
| left: 50%; | ||
| right: 0%; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| #title { | ||
| margin-bottom: 5em; | ||
| } | ||
|
|
||
| pre { | ||
| overflow-x: auto; | ||
| } | ||
| </style> | ||
|
|
||
| <script | ||
| type="text/javascript" | ||
| src="../../../../dist/vis-network.min.js" | ||
| ></script> | ||
| <link | ||
| href="../../../../dist/vis-network.min.css" | ||
| rel="stylesheet" | ||
| type="text/css" | ||
| /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="text"> | ||
| <div id="title"> | ||
| <h1>Vis Network</h1> | ||
| <h2>Edge Styles</h2> | ||
| <h3>Image Arrow Heads</h3> | ||
| </div> | ||
|
|
||
| <ul> | ||
| <li> | ||
| All formats supported by canvas are supported here (like SVG, PNG, | ||
| JPG). | ||
| </li> | ||
| <li>Image can be specified using any URL including data URLs.</li> | ||
| <li> | ||
| Width and height can be set explicitly to scale the image to the | ||
| desired size. | ||
| </li> | ||
| <li> | ||
| The arrow head points to the top with the point in the middle of the | ||
| top edge of the image. | ||
| </li> | ||
| </ul> | ||
|
|
||
| <pre><code> | ||
| const options = { | ||
| edges: { | ||
| arrows: { | ||
| to: { | ||
| enabled: true, | ||
| type: "image", | ||
| imageWidth: 24, | ||
| imageHeight: 24, | ||
| src: | ||
| "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H9.18C9.6,1.84 10.7,1 12,1C13.3,1 14.4,1.84 14.82,3H19M12,8L7,13H10V17H14V13H17L12,8M12,3A1,1 0 0,0 11,4A1,1 0 0,0 12,5A1,1 0 0,0 13,4A1,1 0 0,0 12,3Z' /%3E%3C/svg%3E" | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </code></pre> | ||
| </div> | ||
|
|
||
| <div id="mynetwork"></div> | ||
| <script type="text/javascript"> | ||
| // create an array with nodes | ||
| var nodes = new vis.DataSet([ | ||
| { id: 1, label: "Node 1" }, | ||
| { id: 2, label: "Node 2" }, | ||
| { id: 3, label: "Node 3" }, | ||
| { id: 4, label: "Node 4" }, | ||
| { id: 5, label: "Node 5" } | ||
| ]); | ||
|
|
||
| // create an array with edges | ||
| var edges = new vis.DataSet([ | ||
| { from: 1, to: 3 }, | ||
| { from: 1, to: 2 }, | ||
| { from: 2, to: 4 }, | ||
| { from: 2, to: 5 }, | ||
| { from: 3, to: 3 } | ||
| ]); | ||
|
|
||
| // create a network | ||
| var container = document.getElementById("mynetwork"); | ||
| var data = { | ||
| nodes: nodes, | ||
| edges: edges | ||
| }; | ||
| var options = { | ||
| edges: { | ||
| arrows: { | ||
| to: { | ||
| enabled: true, | ||
| type: "image", | ||
| imageWidth: 24, | ||
| imageHeight: 24, | ||
| src: | ||
| "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H9.18C9.6,1.84 10.7,1 12,1C13.3,1 14.4,1.84 14.82,3H19M12,8L7,13H10V17H14V13H17L12,8M12,3A1,1 0 0,0 11,4A1,1 0 0,0 12,5A1,1 0 0,0 13,4A1,1 0 0,0 12,3Z' /%3E%3C/svg%3E" | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| var network = new vis.Network(container, data, options); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.