search

swimlane / ngx-graph

Graph visualization library for angular
https://swimlane.github.io/ngx-graph
MIT License
938 stars 287 forks source link

Curved edges changes to line after dragging a node #78

Open dev8934 opened 6 years ago

dev8934 commented 6 years ago

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior curve set to shape.curveLinear from d3-shape. For the first render the edges have curveLinear shape. After drag and move a node the connected edges will be simple lines and not curveLinears.

Expected behavior Edges should keep curveLinear shape when the nodes are dragged around.

Reproduction of the problem See the demo: https://swimlane.github.io/ngx-graph/

import {Component, OnInit} from '@angular/core';

import * as shape from 'd3-shape';

@Component({ selector: 'app-xxxx', templateUrl: './xxxx.component.html', styleUrls: ['./xxxx.component.scss'] }) export class XxxxComponent implements OnInit {

constructor() { }

curve = (points) => shape.curveLinear(points); // or some other function from d3-shape // curve : any = shape.curveLinear;

nodes = [ { id: 'start', label: 'start' }, { id: '1', label: 'Query ThreatConnect', }, { id: '2', label: 'Query XForce', }, { id: '3', label: 'Format Results' }, { id: '4', label: 'Search Splunk' }, { id: '5', label: 'Block LDAP' }, { id: '6', label: 'Email Results' } ]; links = [ { source: 'start', target: '1', label: 'links to' }, { source: 'start', target: '2' }, { source: '1', target: '3', label: 'related to' }, { source: '2', target: '4' }, { source: '2', target: '6' }, { source: '3', target: '5' } ];

ngOnInit() {

}

}

<ngx-graph

graph

[view]="view" [links]="links" [nodes]="nodes" [curve]="curve" [scheme]="{ name: 'vivid', selectable: true, group: 'Ordinal', domain: [ '#647c8a', '#3f51b5', '#2196f3', '#00b862', '#afdf0a', '#a7b61a', '#f3e562', '#ff9800', '#ff5722', '#ff4514' ] }" [orientation]="LR"

<ng-template #defsTemplate>

{{node.label}} {{link.label}} Angular CLI: 1.7.4 Node: 7.10.1 OS: linux x64 Chromium Version 65.0.3325.181 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)
med-doulfakar commented 6 years ago

Hey, Any updates about this bug ?

isaacplmann commented 6 years ago

This is fixed in 6.x (not released yet). You can use the existing dagre layout that exhibits this same behavior, but does a better job of keeping space between links or use the dagreNodesOnly layout that uses a simple link layout that will keep the same curve when dragging the node around. (or you can insert your own layout engine)

assafsun commented 6 years ago

Any information when version 6 will be release with this fix and additional content? Thanks for the help.

alindberg commented 5 years ago

Bump - Same question - when will v6 be released? There has been no changes in the repo for several months.

alindberg commented 5 years ago

Just an FYI, v6.0.0.rc3 still hast this same behavior.

assafsun commented 5 years ago

You will need to create a custom llne curve and maintain it the line structure your self for version 5. For version 6, I noticed that the referenced is closed

As a result, I'm closing it for now.

luc-chevaux commented 5 years ago

This is fixed in 6.x (not released yet). You can use the existing dagre layout that exhibits this same behavior, but does a better job of keeping space between links or use the dagreNodesOnly layout that uses a simple link layout that will keep the same curve when dragging the node around. (or you can insert your own layout engine)

Hi Isaac, I'm using 6.2.0 but I cannot achieve the desired result. When dragging nodes edge becomes line and does not move in a continuos manner around my circle. What am I missing?

1

2

Any help is really appreciated. Thanks.

aszorenyi commented 4 years ago

I have the same issue, even in the current version (7.0). Any help is appreciated. Thanks.

sweeneki commented 4 years ago

Same here using 7.0.0

jurvi commented 4 years ago

This is fixed in 6.x (not released yet). You can use the existing dagre layout that exhibits this same behavior, but does a better job of keeping space between links or use the dagreNodesOnly layout that uses a simple link layout that will keep the same curve when dragging the node around. (or you can insert your own layout engine)

This still 100% reproduces in 7.0.1 with dagreNodesOnly layout.

@isaacplmann @assafsun should this be reopened?

sascha1337 commented 4 years ago

Any news? Pretty annoying behaviour...

Davies1212 commented 4 years ago

Still experiencing this unexpected behavior here unfortunately. Or at least similar behavior Node v12.18.1, Angular CLI 8.0.0. Ngx-graph version 7.1.1.

Before I drag one of the nodes: image

After I drag one of the nodes: image

The curves aren't becoming straight lines, but they are being moved to a different location after I drag one. It's almost as if the graph is detecting the outside edge of the node to be in the center of the node when the graph is initialised.

uklimaschewski commented 3 years ago

I also would like to upvote on this. Even a workaround would be helpful.

raman-nbg commented 3 years ago

Can we reopen this issue please? It is clear that this bug is not fixed, yet.

marjan-georgiev commented 3 years ago

Reopening

anvial commented 3 years ago

Hi everyone

Any updates about this issue?

pzatschl commented 2 years ago

What I have found out is that this won't happen when you set the layout of your graph to 'dagreNodesOnly'. It seems that the curve is drawn as intended but it defaults to a straight line whenever there are too few points present.

Saibot27 commented 1 year ago

Any news regarding this issue? Is there a working workaround instead? Regards