Dynamic node adding breaks drag behavior in D3 Force Layout - javascript

I've implemented force layout and it's working well. However, the problem is, dragging one element doesn't pull other elements. I didn't assign fixed:true property so that is not the problem.
Here is what I did. As you see, dragging one element doesn't fully affect the others. For example, pulling one node to the right doesn't move the other nodes to the right. But what I want to do is like this example.

Related

On moving a table in JointJs graph, links are not moving with it..They are getting disconnected and only table is moving. How can I correct it?

In Joint Js graph , links are getting disconnected on moving the tables ? What might be the issue ? How can I correct it. I have shared the link.Please go through it. You will understand what I am saying.
https://resources.jointjs.com/demos/database
This behavior is by design. The demo uses a custom Anchor to change the point of the anchor depending on the position.
If you want to change this behavior you can edit the custom router or make your own.
If you want to remove this behavior, you can remove the defaultAnchor and anchorNamespace options from the JointJS paper. That means it will use the JointJS defaults instead of the custom Anchor.
Although removing these options could make the functionality less desirable in this demo.

Potential issue with move for Compound Graph [cytoscape.js]?

I've been experimenting Compound Graph editor based on Cytoscape.js.
I created a function for adding a compound node for a set of selected nodes with the same parent.
Roughly, it is first tested if the selected nodes have the same parent. If the case, a new node is create, as a child of the parent, and all the selected nodes are moved to this new node.
It seems to work well.
E.g. I created a set of nodes, and grouped them with two levels of decomposition the following way.
A hierarchy of compound nodes created with the created functions
However, when trying to apply the function on a set of nodes at layer 2 as illustrated in the next figure:
Initiating grouping for a set of nodes layer 2
The result is quite surprising, as illustrated in the next figure. The hierarchy of compound nodes is fully changed, while applying exactly the same algorithm than previously.
result of using the function
So I'm wondering if somebody already faced this, and if any idea concerning the reason of this behavior.
In order to debug, I tried to identify the place where the move function is defined in the code (but I didn't succeed yet) in order to put a breakpoint on the call to the move function and to identify which part of the code could cause the unexpected change of parents.
So if someone know where I can find this piece of code, it will also be helpful for understanding where the issue is coming from.

How to drag and drop only particular selected node without affecting child nodes in gojs chart API

I am using GoJs chart plugin to make a heirarchy. Now in this I want to drag a node in heirarchy without changing the structure at all.
for Example, in the attached image if the node "Luke warm" is moved the only that node should be draggable not the child nodes i.e. "Meg meehen hoffa" and "Al ligori". The child node should stay at that position only as it is.
Please see this image for refrence
That is in fact the default behavior. However your code may have set DraggingTool.dragsTree to true. If that is the case, don't set it, or set it to false.

HTML drag and drop dashboard with resizable elements

I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:
The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.
Elements can be added with a button or dragged from a repository
Elements must be resizable
Elements should collide
Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.
I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).
I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.
But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.
Gridster and gridstack make the elements go at the top.
TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.
So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?
Many thanks
Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.
The library is in active developing. So I can implement missing reasonable features.

hidden/not displayed elements receiving mouse over events

I'm pretty new to event-handling inside svgs and there is a little weirdness happening here. I'm doing an infovis where I build an interface and want to display different column-graphs.
That's rather easy and working pretty nicely.
But I'm using hover-events to show the actual numbers when hovering a rect. it works with the one chart I'm generating first. But even though that chart is hidden (I tried both: visibility: hidden and display: none properties) the one that's drawn first still gets the event.
Do I need to remove that one completely in order to generate a new one? So should I better work with separate SVGs and have an external interface, hiding the different svgs?
Any advice/best-practice would be welcome!
Thanks already!
Suse
The other way of hiding things is to push them off the screen, as with hidden iframes. Just give them a negative x/y position. That should take care of mouse-over issues.

Categories