Questions tagged [force-layout]

Force layout is a kind of graph diagram, in which positions of nodes are obtained by a simulation of forces.

0
votes
0answers
15 views

show subgraph based on root node and a given level depth

I am new to both js and D3. Googled this a lot with no answer. Simple problem: I have a graph, I want to hide everything but a subgraph whose root is a given node (of the initial graph) and whose ...
1
vote
1answer
47 views

D3JS force layout center image

I'm using force layout with d3js to draw a network graph the problem is that my SVG is truncated (see the image bellow) how to get the whole image ? i'm using this to initialise the chart : var ...
0
votes
0answers
15 views

How to extract forceSimulation?

I am trying to run d3.forceSimulation() outside of my main function. I would like to do so in order to be able to call the simulation in other functions. The different function function draw_network(...
0
votes
0answers
21 views

How to replace a few of the node circles in a force directed layout with functional javascript toggle switches?

I am trying to model complicated harnesses/cabling configurations using a force directed layout. Most harnesses have lots of connector ends which looks just like a typical force directed layout. I ...
-1
votes
0answers
18 views

D3.js forcelayout with slide bar to filter the display

Need help in creating 2 slide bars: ** What is achieved: ** I am able to generate the fore layout as per the sample data given in the variables nodes and links. ** What am I trying to achive and ...
1
vote
2answers
32 views

Bounded Static Force Layout in D3js v5

Bounded Static Force Layout - help? How can we create a bounded static force layout where simulation.tick() is manually called? In the D3js documentation, we see that the "tick" event isn't ...
2
votes
1answer
269 views

Change d3 force layout link style to match d3-tree look

I am undertaking yet another attempt to draw a family tree with d3. For this, I would like to use the usual node-link graph (like this one): But with a link style like that usually found in d3 trees, ...
0
votes
0answers
15 views

Init fixed placed nodes in Force-directed graph D3

I'm trying to create force directed graph with D3.js, the data is loaded from Json file. My main goal right now is to create the nodes with fixed coordinates from beginning. Right now d3 is building ...
0
votes
0answers
23 views

Labels not showing up on Force Visualization

I am making a force layout in d3. The code attaches the labels to the svg and I can see them in the elements tab in the inspector. But they don't show up on the screen. The labels are present but ...
0
votes
0answers
23 views

D3 V4: Nodes within node of a force layout

I have created a connected nodes force layout diagram, but want to take it further and insert nodes(players) within each node(team) (similar to a pack layout) While i have been successful in ...
0
votes
0answers
28 views

vue and d3 force layout, network visualization

So I'm new to d3 and very little experimented with vue. What I want to do is graph the network after the data has been fetched in a vue component. I tried to recreate some of the older codes about ...
0
votes
0answers
21 views

Can I build up a d3 v4 force graph node by node?

I have a force graph consisting of several hundreds of nodes. The structure is largely like a radial tiny tree, so not too many cross-links. However, it is hard to get the graph to "untangle itself" ...
1
vote
0answers
22 views

How to reposition nodes and translate them to another foci?

im new to D3 and love it so far, I was playing around with multi foci force layout and got a part of what I want to do working fine, What I would like to know if its possible to reposition some of the ...
2
votes
1answer
48 views

Why is my method not recognizing my object member?

I am trying to create a "generic" class for a D3 force graph. When the graphTick() function is called (or any other method it seems...) the member values of the class are undefined as if the method ...
3
votes
3answers
117 views

How to achieve disc shape in D3 force simulation?

I'm trying to recreate the awesome 'dot flow' visualizations from Bussed out by Nadieh Bremer and Shirely Wu. I'm especially intrigued by the very circular shape of the 'bubbles' and the fluid-...
0
votes
0answers
29 views

d3v4 force adding two new nested nodes for each existing node

For each of the nodes in my force simulation, I would like to create two new nodes below it to either side (see below graph) as part of the simulation. I am having trouble successfully drawing the new ...
0
votes
0answers
68 views

How to form an bubble chart in the circle format in D3JS v5?

I need to create bubble chart in the form of hierarchical circle layout. But, I can't create bounded circle layout for bubble chart. I am looking forward to create like this example. var data = ...
3
votes
1answer
42 views

x and y attributes of nodes lost after enter-update-exit pattern

I am trying to transition the nodes of a force simulation in D3v4. The original force is drawn correctly with the nodes aggregated by shark family, and I would like to click on the "Greenland shark" ...
1
vote
2answers
102 views

How to assign the center of d3.forceRadial dynamically using functions?

I have a data set which has parent and child nodes. Parent nodes can link with other parent nodes and child nodes can link with their parent nodes. What I want to do is to put child nodes radially ...
0
votes
0answers
22 views

d3: deleting nodes in force layout changes link lengths

I want to delete nodes in a d3 force layout. One way to do this (by "tgk") is here: http://bl.ocks.org/tgk/6068367 However if you delete a node and then add some more, then the edge lengths get ...
4
votes
1answer
145 views

New layout after opening a group not base on the last layout with cola.js

I recently learned about a excellent JS library cola.js . It can do a force layout and support groups. Learn more here : Cola.js I create a simple demo to show a force layout with opening group ...
-1
votes
1answer
39 views

Stop the movement of nodes in force layout d3.js

I want to display the nodes and relationship between them from json file. I am using force layout d3.js but there is alot of movement of nodes when the page is opened. I want to stop these movements ...
0
votes
0answers
26 views

Add text label to d3 node this curved force layout

I am working with this D3 layout https://bl.ocks.org/mbostock/4600693 I've been trying to figure out how to add a label to the node but nothing I do works. So far I've tried: var lables = node....
0
votes
1answer
36 views

D3-Force-Quicker stabilization of nodes & transition of elements in projectiles

I have implemented the following version of the force diagram to show inter-cluster movement of nodes. https://jsfiddle.net/Edwig_Noronha/67ey5rz0/ The nodes are grouped into four clusters. After ...
0
votes
1answer
48 views

D3.select ID returning null despite existing element with ID

I am trying to select based on ID for various elements in a force-directed graph. I am able to select a node and it's label based on their ID without issue, but when I try to select a link it just ...
11
votes
0answers
430 views

How to make a force directed layout with no node-edge overlapping

I'm trying to make better a force directed layout algorithm (for a directed graph) The base algorithm works, i.e. the isStable condition in the following code is met and the algorithm ends, but edges ...
0
votes
1answer
107 views

D3 Force Directed Graph - Removing Nodes

I am trying to incorporate this example for adding/removing nodes from a Force Directed Graph. I am able to add nodes just fine, and for some reason I am also able to remove the nodes I have added ...
0
votes
0answers
34 views

How to wrap text in force layout d3 with long labels?

I am trying to wrap text which is parsed from a json response into my application. I have two svg elements : rect and text. I want to find a way where I can wrap my svg text such that it fits in the ...
0
votes
0answers
131 views

D3 Force-Directed Tree Set Depth of nodes

I'm working on creating a force-directed tree (this is different from just a regular tree layout!). So far, I have a basic force-directed graph, but I would like to to compute the depth of each of the ...
0
votes
0answers
53 views

How to define and use a custom force using d3-force?

I want to define and use a custom force like centering, radial forces, for which I already have a vector field. This is the force function I want to use: function force(alpha) { viewNode= nodes[...
2
votes
0answers
77 views

React + d3v4: Trouble moving node positions in Beeswarm Chart using the correct motion

I have managed to create a Beeswarm plot which updates the node positions based on new data selected through a dropdown. However, i am unable to program the nodes to shift positions using the correct ...
1
vote
2answers
95 views

Position circles on a horizontal axis without overlapping using force layout

I would like to position circles on a d3 scale and relax them in such a way that they do not overlap. I know that this decreases accuracy, but that's okay for the type of chart that I would like to ...
0
votes
0answers
63 views

Force directed graph with nested nodes

If anybody could help me with describing how to do this kind of graph: At the start we have nodes drawed as circles (force directed layout) User is able to drag nodes After clicking some node new ...
1
vote
1answer
36 views

force layout save zoom scale in the session: d3.event.scale

I have a force layout with a zooming behavior. var min_zoom = 0.3; var max_zoom = 3; var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom]); Before form submission, zooming (using the mouse ...
0
votes
0answers
28 views

Strange drag behavior in Force layout; bouncing delta x and y values

I have a force layout. Implemented a drag behavior. While dragging a node, the node shakes. After digging into the details, trying to track the d3.event.dx and d3.event.dy values, it seems that the ...
0
votes
0answers
63 views

How to use forceCluster with react-vis-force ?

I need to group up the nodes of same color. I tried with forceCluster which is placed inside updateSimulation but not working. please suggest what's wrong with my code OR if there is another way ...
0
votes
0answers
60 views

Uncaught TypeError: Cannot read property 'weight' of undefined D3.JS

I am trying to display a graph using D3.JS and I am getting this error. I had a look at this & this both nothing worked out. before sending my data to D3.JS I have verified and here is my nodes ...
0
votes
1answer
75 views

Creating bidirectional graphs in D3.js

I am building a web app that allows a user to interact with a bidirectional graph and play games to explore graph theory. I am working off of this Graph Editor: http://bl.ocks.org/rkirsling/5001347 ...
0
votes
1answer
59 views

Clustering nodes to a corner instead of a circle in d3.js

Can I use d3 force to cluster nodes in the corner of a screen? I don't want them to be in a clustered in a circle. Something like this.
0
votes
1answer
25 views

d3 force layout: highlight nodes in a group and their neighours

I would like to highlight the nodes and edges that are in a certain group. I have a function connectedNodes that highlights a node and its immediate neighbours. function connectedNodes() { ...
2
votes
1answer
149 views

Center text over curved links in a force-directed graph

This is a 2nd question that builds off of this a previous question of mine here - D3 Force Graph With Arrows and Curved Edges - shorten links so arrow doesnt overlap nodes - on how to shorten curved ...
1
vote
1answer
272 views

D3 Force Graph With Arrows and Curved Edges - shorten links so arrow doesnt overlap nodes

I just read through this post - Links and Arrowheads to terminate at borders of nodes in D3 - however i am struggling to map his answer (on his curved links) with my example which (i think actually) ...
1
vote
1answer
43 views

Enter/exit not properly cleaning up popped nodes/links in force layout

I tried to graph a directed acyclic graph as a force layout. I noticed however that in spite of instilling an enter/exit condition for every group element, popped nodes/links do not remove themselves ...
0
votes
1answer
55 views

D3 force fundamentals?

I'm struggling to understand the impact of alphaDecay and velocityDecay and I wouldn't be comfortable trying to explain the concept of alpha and strength in the context of D3. From my experience level,...
0
votes
0answers
41 views

Link Distance not correct in d3 Force Graph

I have a react application where I am trying to display a graph with nodes that have specified link distances. I have the following code below where the distance is specified with values for each ...
2
votes
1answer
368 views

D3 force simulation - Bring nodes closer to a point in same angle

This question is based on Move d3 circles away from center circle - force layout where when size of a node N1 is changed and I ran simulation on the nodes, the nodes around the N1 will move away in ...
0
votes
1answer
58 views

Bounding circle nodes within rectangle containers

I have been stuck on this problem from the other day, but unfortunately haven't been able to reach a solution. I am trying to achieve a behavior shown here, but in a way to generally do this for ...
0
votes
1answer
50 views

D3 force layout - Links exceed the boundaries of the container, while dragging the nodes

I created a d3-force layout. The nodes are allowed to be dragged within a boundary box only. When the nodes are close to the boundaries, the nodes stay fixed at their positions, according to the ...
2
votes
2answers
152 views

D3 Canvas force layout - disjointed group replelling the other group

I have a set of nodes (A,B,C,D,E,F,G,H,I,J,K) but connected to each other in 2 disjointed groups (A,B,C) and (D,E,F,G,H,I,J,K): <!DOCTYPE html> <html> <body onload="connect1();"...
3
votes
1answer
99 views

Convex hull not working with zoom/pan

I am trying to include the Convex Hull implentation by @bumbeishvili ( https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54feeed42) into my customize d3 force but unfortunately I cannot update ...