Help with force layout: highlighting on mouseover

Community Help
1

Hello,

I would be so grateful for some help!

I would like my graph to highlight a node and the other nodes it’s connected to on mouseover. I’ve based my mouseover function on this example: Network Graph with d3.force grouping / Raven Gao / Observable

I can’t get it to work; instead it unhighlights all nodes: I think it’s something to do with the fact that my nodes are grouped?

Here is my notebook: Graph of influencers and followers; highlight connections on mouseover / vix18 / Observable

If someone could explain my error to me I would be so grateful!

Vix

2

I would add a class to the groups of circles so they can be selected.

   .join("circle")
    //.style("opacity", d => {if (highlightNodes.includes(d.id)) {return 1} else {return 0.4}})

  .attr("r", d => getNodeSize(d))
  .attr(''class',d => `circle${getColor(d)}`)   // give unique class that can be selected

In the mouseOverFunction a select can be crafted.

  const mouseOverFunction = d => {
    if (ifClicked) return;
//  selectAll goes here.  d.target.classList[0]  or d.path[0].classList.value

        node
      .transition(500)
        .style('opacity', o => {
1 Like