寻求支持特定功能的Angular 5 SVG流程图npm插件

Hey there! I totally get the frustration of hunting for a library that checks all your boxes—especially when working with an older Angular version like 5. Here are some solid options that should meet your needs:

1. JointJS (with Angular Wrapper) #

JointJS is a robust diagramming library that works great with Angular, and there are community wrappers available for Angular 5. Here's how it fits your requirements:

• Node add/remove/auto-redraw: Maintain a data array of your nodes/edges, and sync it with JointJS's Graph instance. Any updates to your array will trigger automatic redraws of the affected elements.
• Labels & tooltips: Nodes support custom HTML templates, so you can easily add labels directly in the node markup. For tooltips, you can either use JointJS's built-in tooltip configuration or pair it with Angular's native tooltip directives.
• Node click events: You can bind click handlers directly to nodes, which can call your Angular component methods (just make sure to bind the correct this context).
• Pan & zoom: JointJS has built-in pan and zoom tools that you can enable with just a few lines of code, including configurable zoom limits.

2. ngx-diagrams (Angular 5 Compatible Version) #

While the latest ngx-diagrams versions target newer Angular releases, you can find older versions that work with Angular 5. It's a data-driven library that aligns well with your needs:

• Auto-redraw on array updates: The library is built around reactive data—update your component's nodes/connections array (using immutable patterns like spread operators), and the diagram will automatically re-render.
• Labels & tooltips: Nodes support custom Angular templates, so you can add labels and integrate tooltips (like Angular Material's mat-tooltip) seamlessly.
• Click events: The component emits output events for node clicks, making it easy to hook into your business logic.
• Pan & zoom: Built-in support for canvas panning (via drag) and zooming (via mouse wheel), with options to adjust sensitivity and boundaries.

3. Custom D3.js Integration #

If you're open to a bit more customization, D3.js is a powerful option that plays nicely with Angular 5. Here's how it covers your needs:

• Node add/remove/auto-redraw: D3's enter/update/exit pattern is designed for data-driven updates. When your node array changes, D3 will automatically add new nodes, update existing ones, and remove deleted ones.
• Labels & tooltips: Use D3's text elements to add labels to nodes, and either use the native title attribute for simple tooltips or build a custom Angular tooltip component that triggers on node hover.
• Click events: Bind click events to D3 nodes, and use Angular's NgZone to ensure component methods are called within the Angular context.
• Pan & zoom: D3's zoom behavior lets you implement smooth pan and zoom functionality, with full control over zoom levels and panning boundaries.

Quick Tips for Angular 5 #

• Always check the library's npm page for Angular 5 compatible versions—many libraries have version tags that target older Angular releases (e.g., look for versions tagged with angular5 or check the peer dependencies).
• Use immutable data updates (e.g., this.nodes = [...this.nodes, newNode]) to ensure Angular's change detection picks up the array updates and triggers redraws.
• If you're using Angular Material, leverage its tooltip and dialog components to enhance your diagram's interactivity without building everything from scratch.

内容的提问来源于stack exchange，提问作者Kohtla