score:0

I would recommend reading the Drag Behavior Documentation: https://github.com/mbostock/d3/wiki/Drag-Behavior. So the fundamental way you go about changing the color of nodes is by toggling the classes on a drag start event. For example, consider the following CSS:

.node {
  stroke: #000000;
  stroke-width: 1.5px;
}

circle.others{

 fill: #C0C0C0;    
} 

Now considering you have expressed your nodes as circles for the sake of this example (this is done in the d3 Force Directed Graph: http://bl.ocks.org/mbostock/4062045), you can then register a dragstart event in your d3 script, like this:

function dragstart(d) { 
 d3.selectAll("circle").classed("others",true);  
 d3.select(this).classed("others", false); 

}   

This same idea, can be applied to links. Hope that helps!

score:0

In d3.js v4 , you should just do it like this and it should just work.

First, drag begin:

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;

    d3.selectAll("line").transition().duration(500)
        .style("opacity", function (o) {
            return o.source === d || o.target === d ? 1 : 0;
        });
    d3.selectAll("circle").transition().duration(500)
        .style("opacity", function (o) {
            return neighboring(d, o) ? 1 : 0;
        });

}

Second, drag end:

function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
    d3.selectAll("line").transition().duration(500)
        .style("opacity", 1);
    d3.selectAll("circle").transition().duration(500)
        .style("opacity", 1);
}

Of course, you should define a neighbor function:

graph.links.forEach(function(d) {
      linkedByIndex[d.source.index + "," + d.target.index] = 1;
      linkedByIndex[d.target.index + "," + d.source.index] = 1;
    });
function neighboring(a, b) {
    return a.index == b.index ||  linkedByIndex[a.index + "," + b.index];
}

Related Query