pointlinejs
PointlineJS
PointlineJS is an SVG based JS library for drawing tree diagrams. It relies on Treant-JS, Raphael for handling SVG and animations, JQuery.
Build status
Quick start
- 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/
Development
Requirements
Node version: minimum 20.18.1
How to compile sources
npx webpack --config webpack.config.js
How to run dev-server for debugging
npm run start- open
http://localhost:9000/documentation/in browser
How to build package for import from tarball locally
npm run packcopy 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 --saveinclude 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>