Highly Customizable Vue and Typescript Tree-chart

This repository contains a highly customized version of the d3-org-chart integrated with Vue and Typescript. It provides a flexible and visually appealing way to display hierarchical data in a tree-chart format.

Features

• Customization: The chart offers extensive customization options, allowing users to tailor the appearance and behavior according to their specific requirements.
• Vue Integration: Seamlessly integrates with Vue.js, making it easy to incorporate into Vue projects and leverage the power of reactive components.
• Typescript Support: Built with Typescript, ensuring type safety and enhanced development experience for Typescript users.
• D3.js: Utilizes the D3.js library for efficient manipulation of documents based on data.

Original d3-based Organization Chart

For additional functionality and use cases, you can explore the original repository by Bumbeishvili: D3-Org-Chart

npm i d3-org-chart

import { OrgChart } from 'd3-org-chart';

new OrgChart()
    .container(<DomElementOrCssSelector>)
    .data(<Data>) // Example: https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv
    .render();

Recommended IDE Setup

For an optimal development experience, we recommend using the following setup:

• VSCode: A lightweight and powerful code editor.
• Volar: An extension for Vue.js development (disable Vetur).
• TypeScript Vue Plugin (Volar): Enhances TypeScript support in VSCode.

Project Setup

Get started with the project by following these steps:

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Screenshots

Here's a glimpse of what the tree-chart looks like:

How to Contribute

Contributions are welcome! If you have ideas for improvements or bug fixes, feel free to open an issue or submit a pull request. Please make sure to follow the project's guidelines when contributing.

License

This project is licensed under the MIT License.