CODEWITHSUNDEEP
javascriptd3.jsforce-layout
Eric Nguyen
Eric Nguyen

Reputation: 40612

In D3 force-directed layout, how can I position fixed nodes programmatically, without dragging?

In the answer to this question, mbostock notes that "if a node is fixed, it can only be moved by dragging and not by the simulation."

What if I'd like to position the nodes programmatically, however, perhaps by setting the d.x and d.y values? My attempts thus far have failed. I have tried the obvious setting of d.x and d.y, but these values are ignored for fixed nodes. I've also attempted to temporarily "un-fix", redraw, then "re-fix" the nodes, but this also doesn't work -- the nodes are magically reset to their original positions on the next tick.

Here's a running example of this latter approach.

Here's the key bit of that code, executed on click:

function explicitlyPosition() {
  node.each(function(d) {
    d.x = 0;
    d.y = 0;
    d.fixed = false;
  });
  tick();
  node.each(function(d) {
    d.fixed = true;
  });
  force.resume();
}

Is there a way to do this using the approach I've tried or one similar? Or I could use a totally different graph layout in D3, but I would ideally like large portions of my graph to be laid out in a force-directed manner.

Thanks!

Upvotes: 3

Views: 6951

Answers (2)

Chris Redford
Chris Redford

Reputation: 17788

The jsfiddles used in the 2014 answer and comments for this question are outdated for D3 version 4. In version 4, the process for making fixed nodes is greatly simplified. You can simply set an fx and fy value for each node you want to fix.

For example, like this:

var graph = {
    "nodes": [
        // unfixed
        {"id":0},
        // fixed
        {"id":1, "fx": 200, "fy": 200},
        {"id":2, "fx": 200, "fy": 300},
        {"id":3, "fx": 300, "fy": 250}
    ],
    "links": [
        {"source": 0, "target": 1},
        {"source": 0, "target": 2},
        {"source": 1, "target": 3},
        {"source": 2, "target": 3}
    ]
};

or this:

graph.nodes[3].fx = 500;
graph.nodes[3].fy = 250;

or this:

graph.nodes.each(function(d) {
    if(d.id == 2) {
        d.fx = 0;
        d.fy = 0;       
    }
});

Upvotes: 3

ckersch
ckersch

Reputation: 7687

When you fire tick, the previous positions of nodes are used to determine the new positions, and are stored in the px and py attributes. If you change these attributes, running tick will update the x and y attributes to these values.

Fiddle.

Essentially, your nodes will magically fix to the new values when you redraw, rather than magically fix back to their old values.

Upvotes: 5

Related Questions