Home > Mobile >  D3 blur out / lower the opacity of non-related links when dragging a particular node
D3 blur out / lower the opacity of non-related links when dragging a particular node

Time:04-10

I'm trying to blur out / lower the opacity of non-related links when dragging a particular node. So it only needs to highlight related links and nodes while dragging and blur out those that do not relate to the dragged node. It works if it's outside of a drag function, but it's not consistent when I keep it inside it. It just flashes randomly. Does it need to be happening in dragged?

const link = vis.selectAll("line")
            .data(data.links)
            .join("line")
            .attr("stroke", 'grey')
            .attr("fill", "red")
            .attr("opacity", 0.2)
          
     
    const drag = (simulation) => {
        const dragstarted = (event) => {
            if (!event.active) simulation.alphaTarget(0.3).restart();
            event.subject.fx = event.subject.x;
            event.subject.fy = event.subject.y;
        }

        const dragged = (event) => {
            event.subject.fx = event.x;
            event.subject.fy = event.y;
            node.on("mouseover", function(d) {
                let thisNode = this.id;
                console.log("           
  • Related