D3 force-directed graph: update node position

ikamatovic

I have just started with the d3 library. I've taken a couple of days exploring the api and reviewing the examples and have started a project of my own based on the force-directed graph example.

How can I update the position of node(s) after tick in case when instead of using simple shapes (square, circle ...) you are drawing nodes using paths?

I have provided an example that can be viewed here: jsFiddle

var svg = d3.select('#view').attr({width: 300, height: 300});

var data = {
    "nodes": [
        {
           "id": "node_0",
           "name": "Node 0",
           "color": "blue",
           "h": 10,
           "w": 20,
           "t": "triangle"
        },....

    ],

    "links": [
        {
            "source": 0,
            "target": 1
        },...

    ]
};

var force = d3.layout.force().size([300, 300])
.linkDistance(50)
.nodes(data.nodes)
.links(data.links).start()

var link = svg.selectAll('.link').data(data.links).enter()
.append('line')
.attr('class', 'link')
.attr({"stroke": "#ccc", "stroke-width": 1.5});

var wrapper = svg.selectAll('.node').data(data.nodes).enter()
.append('g')
.attr('class', 'node')
.attr('x', function(d){return d.x})
.attr('y', function(d){return d.y});

var getShape = function(t, x, y, w, h){
    var points = (t == 'triangle') ? 
        [ [x + w/2, y], [x + w/2 , y], [x + w, y + h], [x, y + h]]
        : 
        [ [x, y], [x + w, y], [x + w, y + h], [x, y + h]];

    return d3.svg.line()(points)
}

var node = wrapper.append('path')
.attr('d', function(d){return getShape(d.t, d.x , d.y, d.h, d.w) })
.attr('x', function(d){return d.x})
.attr('y', function(d){return d.y})
.attr('fill', function(d){return d.color})
.call(force.drag);

force.on('tick', function(){
     link
     .attr('x1', function(d){return d.source.x})
     .attr('y1', function(d){return d.source.y})
     .attr('x2', function(d){return d.target.x})
     .attr('y2', function(d){return d.target.y})

     node
     .attr('cx', function(d){return d.x})
     .attr('cy', function(d){return d.y});
});
Lars Kotthoff

For general shapes, you can simply use the transform attribute to move the nodes accordingly, see e.g. this example.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Adjusting node position in force-directed graph

From Dev

D3 Force Directed Graph ajax update

From Dev

Dynamically change color of D3 Node (force directed graph)

From Dev

d3.js Node Position in Force Directed Graph following Search

From Dev

d3.js Node Position in Force Directed Graph following Search

From Dev

D3 force directed graph direction

From Dev

How to make it so D3 Force Directed Graph generates nodes in same position each time

From Dev

d3 force directed graph nodes stay at fixed position after filter

From Dev

Introducing Arrow(directed), in Force Directed Graph d3

From Dev

D3 force directed graph node - text is being duplicated when expading

From Dev

NaN node positions after setting initial position in d3 force-directed network

From Dev

parameterized D3js force directed graph node positioning

From Dev

Search node in force directed graph using d3.js

From Dev

d3 force directed graph downward force simulation

From Dev

D3 force directed graph: Performance issue in a complex graph

From Dev

"Pinning" nodes in a D3 force-directed graph

From Dev

Adding label to the links in D3 force directed graph

From Dev

d3 force directed graph remove text cursor

From Dev

d3 force directed graph don't select text

From Dev

semantic zooming of the force directed graph in d3

From Dev

modifying the d3 force-directed graph example

From Dev

d3 force directed graph, links not being drawn

From Dev

D3 force directed graph moving text

From Dev

modifying the d3 force-directed graph example

From Dev

Load JSON object into D3 Force Directed Graph

From Dev

How to show the tooltip on d3 force directed layout node?

From Dev

Selectively removing node labels in D3 force directed diagram

From Dev

How to show the tooltip on d3 force directed layout node?

From Dev

Prevent node overlap in force directed graph

Related Related

  1. 1

    Adjusting node position in force-directed graph

  2. 2

    D3 Force Directed Graph ajax update

  3. 3

    Dynamically change color of D3 Node (force directed graph)

  4. 4

    d3.js Node Position in Force Directed Graph following Search

  5. 5

    d3.js Node Position in Force Directed Graph following Search

  6. 6

    D3 force directed graph direction

  7. 7

    How to make it so D3 Force Directed Graph generates nodes in same position each time

  8. 8

    d3 force directed graph nodes stay at fixed position after filter

  9. 9

    Introducing Arrow(directed), in Force Directed Graph d3

  10. 10

    D3 force directed graph node - text is being duplicated when expading

  11. 11

    NaN node positions after setting initial position in d3 force-directed network

  12. 12

    parameterized D3js force directed graph node positioning

  13. 13

    Search node in force directed graph using d3.js

  14. 14

    d3 force directed graph downward force simulation

  15. 15

    D3 force directed graph: Performance issue in a complex graph

  16. 16

    "Pinning" nodes in a D3 force-directed graph

  17. 17

    Adding label to the links in D3 force directed graph

  18. 18

    d3 force directed graph remove text cursor

  19. 19

    d3 force directed graph don't select text

  20. 20

    semantic zooming of the force directed graph in d3

  21. 21

    modifying the d3 force-directed graph example

  22. 22

    d3 force directed graph, links not being drawn

  23. 23

    D3 force directed graph moving text

  24. 24

    modifying the d3 force-directed graph example

  25. 25

    Load JSON object into D3 Force Directed Graph

  26. 26

    How to show the tooltip on d3 force directed layout node?

  27. 27

    Selectively removing node labels in D3 force directed diagram

  28. 28

    How to show the tooltip on d3 force directed layout node?

  29. 29

    Prevent node overlap in force directed graph

HotTag

Archive