Questions tagged [d3-force-directed]
174 questions
77
votes
2 answers
Fix Node Position in D3 Force Directed Layout
I want some of the nodes in my force-directed layout to ignore all forces and stay in fixed positions based on an attribute of the node, while still being able to be dragged and exert repulsion on other nodes and maintain their link lines.
I…

Elijah
- 4,609
- 3
- 28
- 36
21
votes
2 answers
How to disable animation in a force-directed graph?
Is there any way of disabling the animation in a D3 force-directed graph?
I am working with this example: https://bl.ocks.org/mbostock/4062045
I want to render the graph without the initial animation, that is, showing all the nodes and links in…

sosloucr
- 221
- 2
- 4
9
votes
0 answers
D3: Difference between layout.force & forceSimulation to build network graph
I am a beginner of D3 and was trying to grasp the ropes on how to build a proper force-directed graph in D3. There appear to be two different ways to build it.
Using layout.force. e.g
Using forceSimulation. e.g
I'm more or less comfortable with…

Jake
- 2,482
- 7
- 27
- 51
9
votes
3 answers
How do I change nodes to be rectangles instead of circles in a d3 force layout?
How can I change the nodes to be rectangles instead of circles in the following d3 forced directed graph?

Anthati Nagaraju
- 321
- 1
- 6
- 14
8
votes
1 answer
d3 force directed layout - link distance priority
Using a force-directed layout in d3, how do I make the link distance a priority, while still keeping a nice graph layout?
If I specify dynamic link distances, but keep the default charge, my graph distances are morphed a bit by the charge function,…

maia
- 3,910
- 4
- 27
- 34
7
votes
1 answer
d3 - "Cannot create property 'vx' on number '65'"
So I'm trying to purpose this great example Force-Directed Graph for some very simple json: https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json
My work is here: codepen
I'm getting a never-ending feed of errors from d3…

roberto tomás
- 4,435
- 5
- 42
- 71
6
votes
2 answers
Set initial d3 zoom based on boundary dynamically - V4
I have a large number of nodes to display on the page, most of the times the circles goes off the visible area of the screen due to node placements.
Is there a way to set the initial zoom level based on the whole boundary box of nodes dynamically…

Navin Leon
- 1,136
- 3
- 22
- 44
5
votes
1 answer
Force simulation is jittery when using svg transforms to update position
JSFiddle example
I've noticed that when updating positions of svg elements in a d3-force diagram, updating the positions of elements using (in the case of circles) the cx and cy attributes is much smoother than using the transform attribute.
In the…

atdyer
- 107
- 6
4
votes
1 answer
D3 adjust linkText position
I got two issues with my forced graph. The first problem refers to the position of the link text. I added an offSet of 50%, to make sure that each linkText will be centered. This works pretty well if the linkText isn´t long. But it completely…

ICoded
- 319
- 3
- 18
4
votes
1 answer
d3-force Make nodes move slower on position update
I'm using d3's force-layout and would like to move nodes on an event trigger.
I've created a a minimal block here showing the desired functionality.
As you can see, when the button is clicked, the nodes move rapidly to their new position. I'd like…

Jared Wilber
- 6,038
- 1
- 32
- 35
4
votes
1 answer
Append groups mess up everything in d3 force layout
I've got a d3 force sim and if I were to add nodes as follows:
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append('circle')
.attr("class", function(d) {return d.type;})
…

vlex
- 131
- 12
4
votes
1 answer
nodes without edges escaping the graph in D3 v4
I have built a graph that dynamically loads a few hundreds (sometimes thousands) nodes using D3.js V4. As much as I try to tune its forces, there are clusters of nodes that may get less cluttered, but consequentially the repel forces push nodes that…

gextra
- 8,439
- 8
- 40
- 62
4
votes
2 answers
How to make all the nodes circle the center node?
I'm trying to make a force directed graph where the children and grandchildren nodes are circling/orbiting the parent. Meanwhile the parent node is connected to its children nodes, and each children nodes are connected to each of their…

deathlock
- 2,756
- 5
- 27
- 48
4
votes
1 answer
d3.js: Pass anonymous function as parameter to centering force?
I'm making an interactive bubble chart and I'm working on functionality to split the data into two groups which move to opposite sides of the screen. I'm using a centering force for my simulation because I think it gives a much nicer and more…

Paul Murray
- 399
- 2
- 16
4
votes
1 answer
d3-force update radius of forceCollide after initializing graph
This question is a follow-up on a previous one titled "D3-Force updating parameters after initializing graph" (D3-Force updating parameters after initializing graph) and that @altocumulus answered.
I am trying to update the simulation forces after…

Pepe G-a
- 75
- 1
- 6