score:23

Accepted answer

You can do this by attaching mouse event handlers to the nodes that set the visibility accordingly. I've taken your example and modified the data slightly so that the node that's triggering these actions has group 2 to be able to identify it.

Then all you need to do is select the other nodes based on the group and set visibility:

var node = svg
  .selectAll(".node")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function (d) { return color(d.group); })
  .call(force.drag)
  .style("visibility", function (d) {
    return d.group === 1 ? "hidden" : "visible";
  })
  .on("mouseover", function (d) {
    if (d.group === 2) {
      node.filter(function (d) { return d.group === 1; })
          .style("visibility", "visible");
    }
  })
  .on("mouseout", function (d) {
    if (d.group === 2) {
      node.filter(function (d) { return d.group === 1; })
          .style("visibility", "hidden");
    }
  });

Complete example here.


Related Query

More Query from same tag