Stack Overflow
Stack Overflow

Questions tagged [force-layout]

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

935 questions
97
votes
5 answers

How do I remove all children elements from a node and then apply them again with different color and size?

So I have the next force layout graph code for setting nodes, links and other elements: var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") …
HotFrost
  • 1,595
  • 4
  • 17
  • 25
91
votes
1 answer

Adding new nodes to Force-directed layout

First question on Stack Overflow, so bear with me! I am new to d3.js, but have been consistently amazed by what others are able to accomplish with it... and almost as amazed by how little headway I've been able to make with it myself! Clearly I'm…
nkoren
  • 2,772
  • 3
  • 17
  • 14
83
votes
6 answers

Is there a way to zoom into a D3 force layout graph?

D3 has a force directed layout here. Is there a way to add zooming to this graph? Currently, I was able to capture the mouse wheel event but am not really sure how to write the redraw function itself. Any suggestions? var vis = d3.select("#graph") …
Legend
  • 113,822
  • 119
  • 272
  • 400
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
73
votes
1 answer

Highlight selected node, its links, and its children in a D3 force directed graph

I am working on a force directed graph in D3. I want to highlight the mouseover'd node, its links, and its child nodes by setting all of the other nodes and links to a lower opacity. In this example, http://jsfiddle.net/xReHA/, I am able to fade out…
Christopher Manning
  • 4,527
  • 2
  • 27
  • 36
58
votes
5 answers

D3js: Automatic labels placement to avoid overlaps? (force repulsion)

How to apply force repulsion on map's labels so they find their right places automatically ? Bostock' "Let's Make a Map" Mike Bostock's Let's Make a Map (screenshot below). By default, labels are put at the point's coordinates and…
Hugolpz
  • 17,296
  • 26
  • 100
  • 187
57
votes
3 answers

How to make force layout graph in D3.js responsive to screen/browser size

I have a graph using force layout, but it has a fixed width w and height h: var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr("width", w) .attr("height", h) var force = d3.layout.force() …
MLister
  • 10,022
  • 18
  • 64
  • 92
54
votes
4 answers

D3.js force directed graph, reduce edge crossings by making edges repel each other

So i have a page already which draws a force directed graph, like the one shown here. And that works fine. I'm using the JS from here, with a few tweaks to spread out the nodes slightly nicer. These are more or less the only…
will
  • 10,260
  • 6
  • 46
  • 69
49
votes
6 answers

Calm down initial tick of a force layout

I've just started dabbling with d3, and find the learning curve quite steep. The process is completely different than what I am used to, and the mathematics are mostly way over my head. Anyway, my project consists of a force layout representing map…
Øystein Amundsen
  • 3,993
  • 8
  • 44
  • 63
37
votes
3 answers

D3 force directed layout with bounding box

I am new to D3 and having trouble setting the bounds for my force directed layout. I have managed to piece together (from examples) what I would like, but I need the graph to be contained. In the tick function, a transform/translate will display my…
Michael Wilson
  • 524
  • 1
  • 4
  • 9
37
votes
1 answer

Why does d3.js v3 break my force graph when implementing zooming when v2 doesn't?

I have a force layout that I have created using d3.js I would like to have both the normal functionality of a draggable force layout as well as the ability to zoom. I have basically copy/pasted the zooming code from …
Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128
37
votes
3 answers

Updating links on a force directed graph from dynamic json data

I am new to D3 and working on a force directed graph where the json data is dynamic. I am able to change the force graph upon receiving new data but that happens with a springing effect. The code that creates my force graph is :
Rahul Rout
  • 1,323
  • 2
  • 14
  • 15
36
votes
1 answer

Add text label to d3 node in Force directed Graph and resize on hover

I am trying to add text label to nodes in d3 Force Directed Graph, there seems to be an issue. This is my Fiddle: When I add the node name like this: node.append("text") .attr("class", "word") .attr("dy", ".35em") .text(function(d) { …
Aditya
  • 4,453
  • 3
  • 28
  • 39
26
votes
2 answers

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 and nodes can overlap. So I want to add some…
cdarwin
  • 4,141
  • 9
  • 42
  • 66
26
votes
1 answer

How do I capture keystroke events in D3 force layout?

I would like to respond to keystroke events directed at nodes in my force layout. I've tried adding all the variants of "keystroke", "keypress", "keyup", "keydown" that I could think of, but none of them is firing. My mouse events fire just fine. I…
Gene Golovchinsky
  • 6,101
  • 7
  • 53
  • 81
1
2 3
…
62 63