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

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

• javascript
• svg
• d3.js
• force-layout

Share Improve this question Follow edited Dec 30, 2017 at 3:39 Mamun 69k99 gold badges5151 silver badges6262 bronze badges asked Aug 29, 2013 at 13:22 ikamatovicikamatovic 4322 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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/en-US/docs/Web/SVG/Attribute/d