问题
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
回答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
来源:https://stackoverflow.com/questions/11297399/two-calls-to-drag-events-in-d3