pointlinejs
v1.0.2
Published
JavaScipt library for visualization of tree diagrams
Downloads
42
Maintainers
egorfedoseevReadme
PointlineJS
PointlineJS is an SVG based JS library for drawing tree diagrams. It relies on Treant-JS, Raphael for handling SVG and animations, JQuery.
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 18.12.0
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>