Node dragging on a graph when dealing with group elements (with bl.ocks example)

[Johnathan Mercer]

I am trying to implement node dragging (manually manipulating a graph) and almost have it working.

The edges are following the drag alright but the node, which is inside of a group (so I can have the node text and text-background for easy reading) are translated incorrectly.

 

I have an example here and the culprit code is on line 461:

http://bl.ocks.org/mercicle/raw/e7d2bf88e1e2dc80f732/

Also, I invite any recommendations on enabling an "edit mode" so that if the user has clicked a checkbox I let them drag the nodes, and if not edit mode, I want mouseover events to occur. To do this would I just selectAll with the .on("mouseover",...)  when edit mode is not on, and when edit mode is on use the selects I have with the .call(drag)?

Thanks,

John

[Johnathan Mercer]

Oh my goodness. I just had to move the drag function to the group instead of the node. I get a little stupid late at night! Haha. 

 

 var dragNode = d3.behavior.drag()

                            .on("drag", function(d,i) {

                                d.x += d3.event.dx

                                d.y += d3.event.dy 

                                d3.select(this).attr("transform", function(d,i){

                                    return "translate(" + d.x+","+d.y+ ")";

                                })

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

                            });

var circleGroups = svg.selectAll("node")

                        .data(force.nodes())

                          .enter()

                          .append("svg:g")

                          .call(dragNode);

[Ian Johnson]

glad you fixed it :)

you should be able to check for edit mode in both your mouseover and drag.start events. this way you don't need to dynamically set the callbacks, just control the flow with the edit flag.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Ian Johnson - 周彦

http://enja.org

[Johnathan Mercer]

That's what I ended up doing :)