PointlineJS is an SVG based JS library for drawing tree diagrams. It relies on Treant-JS, Raphael for handling SVG and animations, JQuery.
- clone repository with command:
$ git clone https://github.com/egor-progger/pointlinejs-quick-start
- to run this example you need to install some dependencies:
$ cd pointlinejs-quick-start
$ npm install
- start local web-server:
$ npx webpack serve
- open in browser address http://localhost:9001
For Docs, Examples, and everything else see: https://egor-progger.github.io/pointlinejs/documentation/
Node version: minimum 18.12.0
npx webpack --config webpack.config.js
npm run start- open
http://localhost:9000/documentation/in browser
-
npm run pack -
copy pointlinejs-[package version].tgz to your other project.
-
add in your other project in package.json in section
dependenciesthis code:"pointlinejs": "file:./pointlinejs-[package version].tgz" -
run
npm install --save -
include PoinlineJS library in your script.ts like this:
import { PointlineJS } from "pointlinejs"; const simple_chart_config = { chart: { container: "#tree-simple" }, nodeStructure: { text: { name: "Parent node" }, children: [ { text: { name: "First child" } }, { text: { name: "Second child" } } ] } }; const test = new PointlineJS(simple_chart_config); test.getTree(); test.draw(); -
add div in your html. Example based on index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PointlineJS Example</title>
</head>
<body>
<div id="tree-simple" style="height: 600px; width: 900px;"></div>
</body>
</html>