Question

I’m using the force-directed layout in d3 and I’m running into a bit of a snag in development.

    var circle = svg.append("svg:g").selectAll("circle") 
     .data(force.nodes()) 
   .enter().append("svg:circle")   
     .attr("r", function( d ) { 
      return d.fValue; 
     }) 
     .style('fill', function( d ) { 
       return strokeColor( d.name );   
     })
     .call(force.drag);

Basically, I want to add more event listeners to the ‘drag’ behavior defined by force.drag – namely, I want to make sure that the nodes change color on drag (not on mouseover). The only two ways that I can think of doing this is either to somehow change force.drag function OR define a new drag behavior.

I don’t know how to do it the first way but when I tried it this second way, the method chaining would only take the second drag event, ignoring the first force.drag event.

.call(customDrag)
.call(force.drag); // This would work

How do I attach another drag event listener or modify the existing force.drag to accomodate for the new animation I want to add?

Thanks in advance

Answer 1

Define your own listeners, as force.drag only calls force.tick() afaik:

  var node_drag = d3.behavior.drag()
        .on("dragstart", dragstart)
        .on("drag", dragmove)
        .on("dragend", dragend);
  vis.selectAll("g.node").call(node_drag)

then just make sure you call your tick() in dragmove.

I did this for adding drag and drop support with force layout.
see my stackoverflow question & answer for an example