d3.js Move node and link together

[pinar gocebe]

In our project I want to add cicrles dynamically when the add node button is clicked and link these circles with an arrow. But When I linked the circles labels of the circles do not move together with circles. The code is below.

JS Fiddle Link: http://jsfiddle.net/pinargocebe/kEhes/3/

How can I solve this problem?

Thanks in advance..

[Erik Zanker]

Your node should be an SVG <G> element (group). Then append the circle and label to the group so that they move together with the group.  Here is some example code:

http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html

[pinar gocebe]

Thanks for reply. 

I tried to use g element as a container which holds circles and labels. In this way I can move together them but when I tried to link them begin of link drawing operation is starting out of the nodes. Links are out of the two linked circle.

2013/7/22 Erik Zanker <eza...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/xlxODYUcRD0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Pınar Göçebe

http://www.pinargocebe.com/

[Erik Zanker]

When using groups, the included elements coordinates are relative to the group.  So for example, to get the circle center, you would have to add the cx and cy attribs to the group's x and y translation.  In d3 you can get the translation via d3.transform():

function GetCurrentTranslation(element) {

        var BasePos = [0, 0];

        var components = d3.transform(element.attr("transform"));

        BasePos[0] = components.translate[0];

        BasePos[1] = components.translate[1];

        return BasePos;

    }

var bpos1 = GetCurrentTranslation(group1);

var bpos2 = GetCurrentTranslation(group2);

var line = svg.append("svg:line")

    .attr("x1", parseInt(circ1.attr("cx")) + bpos1[0])

    .attr("y1", parseInt(circ1.attr("cy")) + bpos1[1])

    .attr("x2", parseInt(circ2.attr("cx"))+ bpos2[0])

    .attr("y2", parseInt(circ2.attr("cy")) + bpos2[1])

    .attr("stroke", "black");