CODEWITHSUNDEEP
javascriptsvgd3.jsforce-layout
ikamatovic
ikamatovic

Reputation: 43

D3 force-directed graph: update node position

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});
});

Upvotes: 1

Views: 6369

Answers (2)

Walter Roman
Walter Roman

Reputation: 4779

You're drawing your path elements with absolute positions using uppercase letters. Instead, try declaring the paths using relative coordinates by using lowercase letters. This will allow you to much more easily move the nodes around based on the force simulator using the svg transform property.

Regarding drawing paths with abolute and relative points: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

Upvotes: 1

Lars Kotthoff
Lars Kotthoff

Reputation: 109292

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

Upvotes: 3

Related Questions