Two 'calls' to drag events in d3

d3.js, drag, force-layout, javascript

Solution

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

Problem

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

Original source

Related problems